WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Облачные технологии. Защита информации.
  • Разработка WEB-сайтов. Дизайн, прототипирование, современные технологии построения сайтов.
  • Интернет-маркетинг. SEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Заочное обучение проводится в группах и индивидуально.
  • При индивидуальном обучении программы ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • При индивидуальном обучении преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Курсы WEB

  • Дизайн, макетирование, прототипирование интернет-сайтов
  • Разработка, создание WEB-сайтов
  • Дигитальный маркетинг, реклама в интернет, оптимизация и "продвижение" сайтов, товаров, услуг в Интернет, SEO оптимизация.
Закончив наш курс, вы научитесь самостоятельно строить коммерческие интернет сайты любой сложности, управлять их размещением на WEB - хостинге, оптимизировать их и "продвигать" в Интернете.

Начав работать по окончании курса и зарабатывать в этой области, Вы сможете сориентироваться, что именно Вам нужно для дальнейшего успешного продвижения в выбранной специальности и пройти у нас более основательные курсы по WEB-программированию, WEB-дизайну, рекламе и продвижению сайтов в интернет. 

hit 
counter

Узнать подробнее


Введите текст с картинки

Регистрация на сайте

Язык программирования С. 

Программирование. Алгоритмы. Структуры данных. 

C language. Basics.

  • C Language intro. Why learn C.
  • Language overview. History. C Language standards.
  • Environment setup. Windows. Linux.
  • Program structure.
  • Basic syntax.
  • Data types.
  • Variables and keywords.
  • Constants.
  • Operators.
  • Flow control. Decision making.
  • Loops.
  • Functions.
  • Scope rules.
  • Arrays.
  • Pointers.
  • Strings.
  • Structures.
  • Unions.
  • Bit fields
  • Typedef.
  • Input & Output.
  • File I/O.
  • Preprocessor directives.
  • Header files.
  • Type casting.
  • Error handling.
  • Recursion.
  • Memory management.
  • Command line arguments.

C language. Advanced.

  • Compiling steps.
  • Macros and preprocessor.
  • Line slicing.
  • Tokens.

Declaration. Definition. Scope.

  • How are variables scoped. Scope rules.
  • How linker resolve multiply defined global symbols.
  • Complicated declarations in C. Redeclaration.
  • Internal and external Linkage.
  • Initialization of global and static variables.

Data types

  • Data types.
  • Use of bool.
  • Integer promotions.
  • Comparison of a float variables.
  • Long data type
  • size_t data type.
  • Data-types and modifiers.
  • Float and Double.
  • Typecasting.

Storage classes

  • Storage classes.
  • Static variables.
  • “extern” keyword.
  • Default values of static variables.
  • “volatile” qualifier.
  • Const qualifier.
  • Initialization of static variables.
  • “register” keyword.

Input/Output

  • Returned values of printf(), scanf()
  • Return type of getchar(), fgetc() and getc().
  • puts() vs printf()
  • Difference between printf, sprintf and fprintf.
  • Difference between getc(), getchar(), getch() and getche().
  • Difference between %d and %i format specifier.
  • scanf() and fscanf().
  • getchar_unlocked().
  • Problem with scanf()
  • rand() and srand()

Operators

  • Operators in C. Arithmetic operators
  • Relational and logical operators.
  • Bitwise operators.
  • Operator precedence and associativity.
  • Evaluation order of operands.
  • Sequence points.
  • sizeof operator .
  • Operands for sizeof operator.
  • Result of comma operator as l-value in C.
  • Order of operands for logical operators.
  • Precedence of postfix ++ and prefix ++ in C.
  • Ternary operator.
  • Difference between ++*p, *p++ and *++p
  • Difference between strlen() and sizeof()
  • Stringizing and Token-pasting operator

Preprocessor

  • Macros.
  • Variable length arguments for macros
  • Multiline macros.
  • CRASH() macro – interpretation
  • The OFFSETOF() macro.
  • Branch prediction macros in GCC
  • Diffference between #define and const in C?
  • Constants in C
  • Preprocessor directives. Advanced.
  • isgraph() library function
  • Create your own header file.
  • difftime() library function
  • tmpnam() library function
  • _Generic keyword.
  • math.h library functions
  • typedef versus #define in C
  • strftime() library function
  • exec family of functions

Arrays & Strings

  • Arrays in C Language
  • Strings in C Language
  • Escape sequences in C
  • Properties of array in C language
  • Do not use sizeof for array parameters
  • Initialization of variable sized array.
  • Single quoted vs double quoted declaration of char array.
  • Multidimensional arrays in C.
  • char s[] vs char *s .
  • Storage for strings.
  • Array and pointer.
  • How to dynamically allocate a 2D array.
  • How to pass a 2D array as a parameter.
  • Short hand array notation
  • Accessing array out of bounds
  • strcpy(), strcmp(), strdup(), strdndup().
  • strpbrk(), strcull(), ispunct(), strspn()
  • isalpha() and isdigit().

Control statements

  • For vs While
  • Nested loops.
  • switch statement
  • while(1), while(0)
  • goto statement
  • Continue statement
  • Break statement
  • Using range in switch case

Functions

  • Function prototype.
  • return vs exit()
  • How to count variable number of aguments.
  • Evaluation order of function parameters.
  • Return multiple values from a function.
  • Static functions
  • exit(), abort() and assert()
  • _Noreturn function specifier.
  • __func__ identifier.
  • Callback function.
  • Parameter passing techniques

Pointers

  • Double Pointer (Pointer to Pointer).
  • Why C treats array parameters as pointers.
  • Dangling, Void , Null and Wild pointers
  • Pointer to a function.
  • Pointer vs Array
  • near, far and huge pointers
  • const char *p, char * const p and const char * const p
  • Pointer to an Array

Enum, Struct and Union

  • Structure member alignment.
  • Operations on struct variables
  • Bit fields.
  • Flexible array members in structure.
  • Structure vs Union
  • Anonymous Union and Structure
  • Compound literals

Memory Management

  • Memory layout of C programs,
  • How to deallocate memory without using free()
  • calloc() vs malloc()
  • Use of realloc()
  • What is memory leak? How can we avoid?

File handling

  • Basics of file handling
  • fseek() vs rewind()
  • EOF, getc() and feof()
  • fopen() for an existing file in write mode
  • fgets() and gets().
  • fsetpos().
  • tmpfile() function./li>
  • fgetc() and fputc().
  • fseek().
  • ftell().
  • lseek().

Data structures

  • Array
  • Linked list
  • Stack
  • Queue
  • Binary tree
  • Binary search tree
  • Heap
  • Hashing
  • Graph
  • Matrix

Algorithms

  • Search algorithms - linear search and binary search
  • Comparison of sorting algorithms
  • Intro to sorting algorithms: bubble sort
  • Selection sort and insertion sort
  • Heap sort
  • Merge sort
  • Quicksort
  • Radix sort a special case sorting algorithm

Встроенные директивы Angular (Angular built-in directives)

Примеры


app.modules.ts


import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { StudentsComponent } from './students/students.component'; @NgModule({ declarations: [ AppComponent, StudentsComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



StudentsComponent

import { Component, OnInit } from '@angular/core'; import { StudentsInterface } from '../students-interface'; @Component({ selector: 'app-students', templateUrl: './students.component.html', styleUrls: ['./students.component.css'] }) export class StudentsComponent implements OnInit { students: StudentsInterface[]; constructor() { } ngOnInit() { this.students = [ { name: 'Anna', id: 1234567, age: 22, course: 'Angular' }, { name: 'Haim', id: 987654, age: 18, course: 'WEB' }, { name: 'Yossy', id: 456687456, age: 44, course: 'C' }, { name: 'Vasily', id: 1234567, age: 22, course: 'PHP' }, { name: 'Bob', id: 14312554, age: 37, course: 'Photoshop' }, { name: 'Bob', id: 657856784567, age: 37, course: 'WEB' }, ]; } }



StudentsInterface

export interface StudentsInterface { name: string; id?: number; age: number; course: string; }



students.component.html


<h1>Students</h1> <hr> <h2>Names -all</h2> <ng-container *ngFor='let student of students; let n = index;'> <p>{{n}} : {{student.name}}</p> </ng-container> <hr> <h2>WEB students</h2> <ul *ngFor='let stud of students'> <li *ngIf='stud.course === "WEB"'>{{stud.course}} -> {{stud.name}}</li> </ul> <hr> <h2>Colored list</h2> <ul *ngFor='let studnt of students'> <ng-container [ngSwitch]='studnt.course'> <div style='color:red' *ngSwitchCase='"WEB"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:green' *ngSwitchCase='"PHP"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:blue' *ngSwitchCase='"C"'>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> <div style='color:lightgray' *ngSwitchDefault>Name: {{studnt.name}}, Age: {{studnt.age}}, Course: {{studnt.course}}, Id: {{studnt.id}}</div> </ng-container> </ul>





Обмен данными между родительским и дочерним компонентом (Angular component interaction)

@input


@output


Decorators


Event emitter


C помощью декораторов @Input, @Output и API EventEmitter можно обеспечить обмен данными между родительскими и дочерними компонентами.


Декоратор @Input

Дочерний компонент с помощью декоратора input может получать данные от родительского, а  с помощью декоратора output - посылать.


Для получения данных от родительского компонента дочерним:

- в дочернем компоненте создаём свойство, в которое данные будем получать, декорируем его с помощью декоратора @Input

- в родительском компоненте создаём public - свойство, которое будем передавать

- при вызове дочернего компонента через созданное нами свойство привязываем к свойству дочернего компонента данные из родительского.


Родительский компонент:

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent ...'; }


Шаблон родительского компонента - вызов дочернего:

<h1>This is parent component:</h1> <hr> <app-inoutcomponent [inFromParent]='string1'></app-inoutcomponent>


Дочерний компонент

import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-inoutcomponent', templateUrl: './inoutcomponent.component.html', styleUrls: ['./inoutcomponent.component.css'] }) export class InoutcomponentComponent implements OnInit { @Input() public inFromParent: string; constructor() { } ngOnInit() { } }


Шаблон дочернего компонента 

<h1>This is child component:</h1> <h3>{{inFromParent}}</h3>


Результат



Добавим в родительский компонент метод, который меняет это свойство. Привяжем его к событию click кнопки.

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent ...'; changeChildData() { this.string1 += ' Changed '; } }


При каждом нажатии к строке будем приписывать текст: this.string1 += ' Changed ';


Результат после 2-х кликов:



Декоратор @Output и  EventEmitter 

Передача данных от дочернего компонента к родительскому.

Для этого используем декоратор @Output и привяжем к дочернеиу компоненту обработчик событий, который инициирует эту передачу.


У дочернего компонета создаём своё событие - outToParent (объект класса EventEmitter ), декорируя его декоратором @Output.

Создадим в дочернем компоненте метод - sendToParent() . Его задача: передать событие родительскому объекту (метод emit()).

Передано это событие будет через Angular объект - $event.

Таким образом, созданное нами событие - outToParent произойдёт в тот момент, когда сработает sendToParent()и его (события) содержимое можно будет получить из $event.


Дочерний компонент

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-inoutcomponent', templateUrl: './inoutcomponent.component.html', styleUrls: ['./inoutcomponent.component.css'] }) export class InoutcomponentComponent implements OnInit { @Input() public inFromParent: string; @Output() public outToParent = new EventEmitter(); constructor() { } ngOnInit() { } sendToParent() { this.outToParent.emit('Child sent this message to parent ...'); } }


Привяжем обработчик событий - click к кнопке в шаблоне дочернего компонента и по этому клику вызовем метод sentToParent, который в свою очередь включит событие outToParent:

Шаблон дочернего компонента

<h1>This is child component:</h1> <h3>{{inFromParent}}</h3> <br> <button (click)='sendToParent()'>Click to send data!</button> <br>


Стиль дочернего компонента

* {
color: green;
}



Родительский компонент получает данные события методом, который мы в нём создали - getNessage()

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; public string1 = <string> 'Data from parent ...'; public string2 = ''; changeChildData() { this.string1 += ' Changed '; } receiveFromChild(evnt){ this.string2 = evnt; } }



Шаблон родительского компонента (outToParent - новое событие, которое мы создали)

<h1>This is parent component:</h1> <button (click)='changeChildData()'>Change child data </button> <hr> <strong>{{string2}}</strong> <app-inoutcomponent (outToParent)='receiveFromChild($event)' [inFromParent]='string1'></app-inoutcomponent>


До клика



После клика



Декоратор @Component, свойства - inputs, outputs


Вместо использования декораторов свойств - @Input и @Outpur можно использовать свойства декоратора класса - @Component (inputs, outputs).


import { Component, OnInit, EventEmitter } from '@angular/core'; // import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-inoutcomponent', templateUrl: './inoutcomponent.component.html', styleUrls: ['./inoutcomponent.component.css'], inputs: ['inFromParent'], outputs:['outToParent'] }) export class InoutcomponentComponent implements OnInit { // @Input() public inFromParent: string; inFromParent: string; // @Output() public outToParent = new EventEmitter(); outToParent = new EventEmitter(); constructor() { } ngOnInit() { } sendToParent() { this.outToParent.emit('Child sent this message to parent ...'); } }


Но Angular рекомендуют использовать @Input и @Output 

https://angular.io/guide/styleguide#style-05-12)%20(use-output-property-decorator

style 05-12






Использование форм в Angular 

Angular имеет свой собственный набор библиотек для построения сложных форм. Последняя версия Angular имеет две мощные стратегии построения форм:

  • шаблонные формы (Angular template-driven forms - FormsModule
  • модельные или реактивные формы (Angular reactive forms - ReactiveFormsModule

Обе технологии работы с формами принадлежат библиотеке @ angular/forms и основаны на одних и тех же классах управления формой. Тем не менее, они значительно отличаются в своей философии, стиле программирования и технике. 

С формой, управляемой шаблоном, большая часть работы выполняется в шаблоне; и с формой, управляемой моделью, большая часть работы выполняется в классе компонентов.




Шаблонные формы (Angular template-driven forms)

Для работы с формами Angular предоставляет специальные директивы, которые можно использовать для связки входных данных формы и модели. Директивы, специфичные для формы, добавляют дополнительную функциональность и поведение к простой форме HTML. Конечным результатом является то, что шаблон обеспечивает привязку значений к модели и проверку формы.

Когда мы создаём в шаблоне элемент FORM, Angular привязывает к этому элементу директиву ngForm (например: <form #myForm = 'ngForm'>). Создаём объект myForm из ngForm (ngForm instance)

Эта директива даёт:

значения полей формы

статус полей (Valid/Invalid)

Angular отслеживает событие submit (например: нажатие кнопки <input type=submit> или <button type=submit> и ьд) для формы через обработчик событий - ngSubmit. При возникновении события submit Angular инициирует слбытие ngSubmit, к которому мы привязываем обработчик событий .

<form #myForm = 'ngForm' (ngSubmit) = 'mySubmit(myForm.value)'>

Для каждого элемента input формы необхлжтил задаьб атрибут name и дтрективу ngModel.

<input id="inputName" type="text" placeholder='nae' name='name' ngModel>

При этом в переменную myForm.value будут занесены данные формы.

Пример1

Далее в примере используем Angular директивы для форм:

ngForm - создаём объект - форма (в переменной myForm)

ngModel - включаем поле ввода в объект с данными формы

ngModelGroup - создаём в объекте, содержащем данные формы, дочерний объект - группу даных

ngValue - при необходимости задаём значения для полей ввода

Angular - событием ngSubmit вызываем метод mySubmit(), передавая ему в качестве параметра объект со значениями формы (myForm.value). Все свойства этого объекта - https://angular.io/api/forms/NgForm.


Импортируем FormsModule (в app.modules.ts)

import {FormsModule} from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormComponent } from './form/form.component'; @NgModule({ declarations: [ AppComponent, FormComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



Компонент

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.css'] }) export class FormComponent implements OnInit { constructor() { } ngOnInit() { } mySubmit(val){ console.log(val); } }



Шаблон - HTML

<form #myForm='ngForm' (ngSubmit)='mySubmit(myForm.value)'> <label for="inputName">Name</label> <input id="inputName" type="text" placeholder='Your name' name='name' ngModel> <label for="inputEmail">Email</label> <input id="inputEmail" type="e-mail" placeholder='e-mail' name='mail' ngModel> <div ngModelGroup='pwd'> <label for="inputPassword">Password</label> <input type="password" id="inputPassword" placeholder="Password" name='passwd' ngModel> <label for="confirmPassword">Confirm Password</label> <input type="password" id="confirmPassword" placeholder="Confirm password" name='passwdConf' ngModel> </div> <label for="select">Gender</label> <select id="select" name='gender' ngModel="0"> <option ngValue='0'>Genger</option> <option ngValue='m'>Male</option> <option ngValue='f'>Female</option> <option ngValue='o'>Other</option> </select> <label for='agreement'>Confirm that you've read the Terms and Conditions </label> <input id='agreement' type="checkbox" name='agreement' ngModel> <hr> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </form>



Стили


::placeholder { color: rgba(255, 0, 0, 0.513); font-style: italic; } INPUT, SELECT { display: block; margin: 5px; padding: 3px 5px; } BUTTON { margin: 10px; padding: 5px 15px; } LABEL { font-weight: bold; }



Результат (объект с данными формы и в нём - дочерний объект - пароли)





Проверка данных формы (Angular form validation)

В Angular - формах для контроля вводимых данных можно получать статус формы и элементов управления и пользоваться классами стилей, которые Angular автоматически присваивает элементам управления в зависимости от результатов проверки данных.

Классы стилей, которые Angular меняет:

Статус элемента (INPUT, SELECT, ...)Класс, в случае: истина (true)Класс, в случае: ложь (false)
Элемент управления был посещён (visited )ng-touchedng-untouched
Значения элемента изменено (value has changed)ng-dirtyng-pristine
Значение элемента формы верно (value is valid)ng-validng-invalid

Свойства (статус) элемента управления (https://angular.io/api/forms/NgControlStatus), которыми можно пользоваться:

  • untouched 
  • touched 
  • pristine 
  • dirty 
  • invalid 
  • valid 
  • submitted (для объекта - формы)


При проверки данных формы можно использовать атрибуты элемента (например: min, max, required, email, minlength, maxlength, ... ) и проверку на соответствие шаблону (атрибут pattern), который задаётся в формате Regular Expressions.

(https://angular.io/api/forms/Validators)



В примере мы будем использовать:


Компонент.

Метод mySubmit() выводит на консоль данные формы.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.css'] }) export class FormComponent implements OnInit { constructor() { } ngOnInit() { } mySubmit(formObj){ console.log(formObj.value); console.log(formObj.controls); } }



HTML - шаблон компонента (form.component.html).

В переменной шаблона #myForm создаём из нашей формы объект типа ngForm (#myForm='ngForm')

К событию ngSubmit привязываем обработчик - метод mySybmit() и передаём ему вкачестве параметра нашу форму (объект myForm ). Единственая функция этого метода в нашем примере - распечатать в консоль данные формы.

К полям ввода добавляем параметры name и директиву ngModel, чтобы использовать этот элемент в нашем объекте myForm.

Вводим в некоторые поля INPUT переменные шаблона, которым присваиваем ngModel - получаем возможность через эту переменную использовать все возможные свойства ngModel (параметры, статус, ...).

Создаём для некоторых полей ввода DIV, в который будем выводить сообщение об ошибке (присвоим ему class='myError').

Этот элемент должен появляться только тогда, когда есть ошибка. Для этого присваиваем его свойству hidden свойство valid поля ввода (свойство valid того элемента input , к которому мы обращаемся по имени переменной, которую ему присвоили). Angular по результатам проверки данных в этом поле выставляет его свойство valid в false или true. 

В теге input с именем name задано свойство: required. Это - один из встроенных валидаторов Angular (https://angular.io/api/forms/Validators).

Если в поле нет значения, то валидатор включает статус элемента ввода: invalid (и элементу автоматически присваивается CSS класс: ng-invalid, что тоже можно использовать ) .

Для контоля данных, вводимых в поле ввода mail используем один из встроенных валидаторов Angular - email (https://angular.io/api/forms/Validators).

В поле ввода пароля используем 2 валидатора: minlength='7' и pattern='\w*'. Первый - ограничивает мин длину пароля, второй разрешает использовать в пароле только буквы, цифры и символ подчеркивания (Regular Expressins \w*).

В этом случае возможны разные ошибки данных и удобно при разных ошибках вывожить разные сообщения.

Для этого создаём для каждой ошибки свой элемент DIV.

Атрибут hidden этого элемента привязываем к истинности значений, которые получаем из метода hasError() нашего элемента ввода (https://angular.io/api/forms/NgModel), передавая ему в качестве параметра имя валидатора, который включил ошибку.

Значение  pwdInput.hasError("minlength") примет значение true в том случае, если ошибку включи валидатор minlength.

После поля подтверждения пароля (pwConf) тоже ставим элемент DIV для вывода ошибки повтора пароля. Для его появления или отсутствия в окне браузера используем другой способ (можно было бы также управлять его свойство hidden) - директиву *ngIf.

В качестве условия вставляем логическое выражение - результат сравнения паролей в двух полях:

 pwdInput.value == pwdConf.value

Для того, чтобы исключить появление в окне этого элемента до того момента, как вообще начали  вводить пароль, используем свойство поля ввода пароля - pwdInput.dirty (менялось ли поле с момента загруззки страницы). И условие появления в окне нашего элемента принимает вид:

*ngIf='!(pwdInput.value == pwdConf.value) && pwdInput.dirty'

В поле ввода select - option (gender ) используем одно из полей option в качестве подсказки пользователю.

Создаём поле <option ngValue='0'>Genger</option> и с помощью директивы ngModel="0" делаем его selected в момент загрузки странички (атрибут поля option - selected не работает).

Кнопку submit формы

<button [disabled]='!myForm.valid' type="submit">Submit</button>

делаем недоступной до того момента, пока данные формы не введены корректно (myForm.valid = true)

Информационно поле:

<div *ngIf='myForm.submitted' class='submitedMsg'>Your form successfully submitted</div>

Появляется в том случае, если истинно условие: myForm.submitted.


<form #myForm='ngForm' (ngSubmit)='mySubmit(myForm)'> <div> <label for="inputName">Name</label> <input type='text' #nameInput='ngModel' id="inputName" required type='text' placeholder='Your name' name='name' ngModel> <div [hidden]='nameInput.valid ' class='myError'>Name required!</div> </div> <div> <label for="inputEmail">Email</label> <input id="inputEmail" #mailInput='ngModel' type='text' email placeholder='e-mail' name='mail' ngModel> <div [hidden]='mailInput.valid ' class='myError'>Incorrect mail format!</div> </div> <div ngModelGroup='pwd'> <label for="inputPassword">Password (digits only)</label> <input #pwdInput='ngModel' type="password" id="inputPassword" placeholder="Password" name='passwd' minlength='7' pattern='\w*' ngModel> <div [hidden]='!pwdInput.hasError("minlength")' class='myError'>Password minimum length: 7 symbols!</div> <div [hidden]='!pwdInput.hasError("pattern") ' class='myError'>Password could contain letters, numbers or underscores only!</div> <label for="confirmPassword">Confirm Password</label> <input #pwdConf='ngModel' type="password" id="confirmPassword" placeholder="Confirm password" name='passwdConf' ngModel> <div *ngIf='!(pwdInput.value == pwdConf.value) && pwdInput.dirty' class='myError'>Passwords do not match</div> </div> <div> <label for="select">Gender</label> <select id="select" name='gender' ngModel="0"> <option ngValue='0'>Genger</option> <option ngValue='m'>Male</option> <option ngValue='f'>Female</option> <option ngValue='o'>Other</option> </select> </div> <div> <label for='agreement'>Confirm Terms and Conditions </label> <input id='agreement' type="checkbox" name='agreement' ngModel> </div> <div> <button type="reset" class="btn btn-default">Cancel</button> <button [disabled]='!myForm.valid' type="submit">Submit</button> </div> </form> <hr> <div *ngIf='myForm.submitted' class='submitedMsg'>Your form successfully submitted</div>



Стили компонента (form.component.css)

Определяем, в частности, свойства стилей для классов: .ng-valid (зелёная граница слева) и .ng-invalid (красная граница слева)

FORM { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } FORM>DIV { box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.3); padding: 5px; } ::placeholder { color: rgba(0, 68, 255, 0.513); font-style: italic; } INPUT, SELECT { display: block; margin: 5px; padding: 10px; width: 95%; } INPUT[type='checkbox'] { width: auto; float: right; } FORM>DIV:last-child { text-align: center; } BUTTON { margin: 10px; padding: 5px 15px; } LABEL { font-weight: bold; } /* Form validation classes */ INPUT.ng-valid { border-left: 5px solid green; } INPUT.ng-invalid { border-left: 5px solid red; } .myError { border-left: 1px solid red; padding: 5px; color: red; } .myError:before { content: 'Error message: '; } .submitedMsg { border-left: 5px solid blue; padding: 20px 10px; color: red; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2); }



app.module.ts

import {FormsModule} from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormComponent } from './form/form.component'; @NgModule({ declarations: [ AppComponent, FormComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



Результат - после загрузки страницы (кнопка submit недоступна, под полем ввода имени - сообщение об ошибке):


Результат - ввели имя


Вводим неправильный e-mail (кнопка submit опять недоступна и под полем mail - сообщение об ошибке)


Ввели правильный e-mail, вводим пароль - 123+.

Появляются сразу 2 сообщения об ошибке в пароле: количество символов недостаточно и символ + недопустим и сообщение о неправильно подтверждённом пароле.


Вводим всё, как положено, и нажимаем SUBMIT




Модельные формы (Angular "model-driven" или "reactive" forms )

В отличие от форм, управляемых шаблоном, модельные (Angular Model-driven or Reactive forms) формы управляются моделью, которая описывается в компоненте формы.

Пример1


Создаём компонент form2 и описываем в нём модель нашей формы. Модель сохдаём в переменной myForm2 , пользуясь классом FormGroup и классом FormControl, которые импортируем их @angular/forms.

Модель простая - 2 поля ввода.

Создаём метод mySubmit, который данные формы выводит в консоль.


import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl} from '@angular/forms'; @Component({ selector: 'app-form2', templateUrl: './form2.component.html', styleUrls: ['./form2.component.css'] }) export class Form2Component implements OnInit { myForm2 = new FormGroup({ name: new FormControl(), mail: new FormControl() }); constructor() { } ngOnInit() { } mySubmit(){ console.log(this.myForm2.value); } }


В app.module для использования Reactive - форм импортируем ReactiveFormsModule


import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { Form2Component } from './form2/form2.component'; @NgModule({ declarations: [ AppComponent, Form2Component ], imports: [ BrowserModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }



Создаём шаблон компонента, в котором привязываем форму к модели ([formGroup]='myForm2'), описываем для ней событие ngSubmit , привязываем каждое поле ввода к соответствующей ему переменной в модели (formControlName='ИМЯ_СВОЙСТВА_В_МОДЕЛИ')


<form [formGroup]='myForm2' (ngSubmit)="mySubmit()"> <input formControlName='name'> <input formControlName='mail'> <button type='submit'>Submit form </button> </form>


Результат:







Пример2


Создаём модель, в которой используем также и проверку данных формы.

Для этого нужны : FormControl , FormGroup, Validators 

Создаём компонент, импортируем в него: FormGroup? ForControl , Validators 


import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; @Component({ selector: 'app-react-form', templateUrl: './react-form.component.html', styleUrls: ['./react-form.component.css'] }) export class ReactFormComponent implements OnInit { submitDisabled: boolean; submitButtonText: string; myForm = new FormGroup({ name: new FormControl(null, Validators.required), email: new FormControl('', Validators.email), address: new FormGroup({ street: new FormControl(), city: new FormControl(), postalcode: new FormControl() }), }); constructor() { this.submitDisabled = true; this.submitButtonText = 'Submit disabled'; } ngOnInit() { } myFormSubmit() { if (this.myForm.valid) { this.submitDisabled = false; this.submitButtonText = 'Click to submit data'; } else { this.submitDisabled = true; this.submitButtonText = 'Submit disabled'; } console.log(this.myForm.value); } myFormInput(){ if (this.myForm.valid) { this.submitDisabled = false; this.submitButtonText = 'Click to submit data'; } else { this.submitDisabled = true; this.submitButtonText = 'Submit disabled'; } console.log(this.myForm.value); } }



myForm - модель нашей формы. Теперь она содержит поля (элементы управления - FormControls) : name, email, street, city, postalcode 



myForm = new FormGroup({ name: new FormControl(null, Validators.required), email: new FormControl('', Validators.email), address: new FormGroup({ street: new FormControl(), city: new FormControl(), postalcode: new FormControl() }), });




Причём:

  • поля street, city, postalcode сгруппированы в отдельный объект - address FormGroup
  • поля naeme, email передают 2 параметра в FormControl : начальное значение и тот валидатор, который будет использоваться при проверки данных в поле ввода.


Компонент использует 2 переменные :  submitDisabled: boolean и submitButtonText: string.

В первой храним статус кнопки SUBMIT, во второй - текст кнопки.

Значения переменных меняем динамически и используем их в шаблоне компонента.


Компонент использует 2 метода: 

  • myFormSubmit() - привязан в шаблоне к событию формы (ngSubmit)
  • myFormInput() - привязан к событию формы - (change)

HTML шаблон компонента (првязываем форму к модели : [formGroup]="myForm" ) и каждый элемент - к переменной моделию. Группу элементов address объединяем в элементе div id='address':



<form id='myForm' [formGroup]="myForm" (ngSubmit)='myFormSubmit()' (input)='myFormInput()'> <div class='controlGroup'> <label>Name</label> <input type='text' formControlName='name' placeholder="name"> </div> <div class='controlGroup'> <label>E-mail</label> <input type='text' formControlName='email' placeholder="E-Mail"> </div> <div id='address' formGroupName='address'> <div class='controlGroup'> <label>Street</label> <input type='text' formControlName='street' placeholder="street"> </div> <div class='controlGroup'> <label>City</label> <input type='text' formControlName='city' placeholder="city"> </div> <div class='controlGroup'> <label>Postalcode</label> <input type='text' formControlName='postalcode' placeholder="postalcode"> </div> </div> <div class='controlGroup submit'> <div id='myError' *ngIf='myForm.invalid'>Incorrect form data found! Submit disabled. Check input fields</div> <div id='myCorrect' *ngIf='myForm.valid'>All form data typed correctly Press submit button to send it ... </div> <button class='myButton' type='submit' [disabled]='submitDisabled' [innerText]='submitButtonText'></button> </div> </form>



Файл со стилями:


* { --myColor1: #0a100d; --myColor2: #abac97; --myColor3: #f1f0e2; --myColor4: #a22c29; --myColor5: #902923; } BODY { background-color: #FFF; }

/* Grid layout styles begin */ #myForm { display: grid; grid-template-columns: 1fr; grid-gap: 10px; } #address { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; } .controlGroup { display: grid; grid-template-rows: 1fr 1fr; } DIV.submit { justify-content: center; align-content: center; } /* Grid layout styles end */ INPUT { padding: 10px; border-radius: 5px; border: 1px solid var(--myColor2); background-color: var(--myColor3); transition: border-color 1s; } INPUT:hover { border-color: var(--myColor1); } INPUT:focus { outline: none; background-color: #FFF; } INPUT:active { box-shadow: 0 2px 5px 0px var(--myColor2) ! important; } LABEL { color: var(--myColor1); } #address { padding: 10px; border-radius: 5px; border: 1px solid var(--myColor2); } .myButton { display: inline-block; padding: 10px 50px; border: 1px solid var(--myColor2); border-radius: 10px; background-color: #FFF; color: var(--myColor2); font-size: 1.2rem; box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2); transition: background-color 1s; } .myButton:hover { box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2); border-color: var(--myColor5); color: var(--myColor5); transition: box-shadow 1s; } .myButton:active, .myButton:focus { outline: none; } .myButton:active { border-color: var(--myColor4); color: var(--myColor1); } .myButton:disabled { background-color: var(--myColor4); color: #FFF; box-shadow: none; transition: background-color 1s; } .myButton:disabled:hover { box-shadow: none; color: #FFF; } /* Form validation control begin */ INPUT.ng-invalid { color: var(--myColor4); border-left: 5px solid var(--myColor4); } INPUT.ng-valid { color: var(--myColor4); border-left: 5px solid var(--myColor2); } /* Form validation control end */ /* Info block before submit button */ #myError { color: var(--myColor4); width: 100%; text-align: center; padding: 10px; } #myCorrect { color: var(--myColor1); width: 100%; text-align: center; padding: 10px; }


Загрузили страничку.

Кнопка SUBMIT недоступна (её атрибут [disabled]='submitDisabled' имеет значение false)

Текст на кнопке - из переменной submitButtonText ([innerText]='submitButtonText')

Поле ввода имени помечено слева красной обводкой (стиль INPUT.ng-invalid {color: var(--myColor4);border-left: 5px solid var(--myColor4);}) из-за того, что отработал валидатор required для этого поля (name: new FormControl(null, Validators.required), никакого значения туда не введено, а начальное значение мы задали null, чего не допускает валидатор)

Над кнопкой SUBMIT - сообщение об ошибке (по директиве ngIF отобразился <div id='myError' *ngIf='myForm.invalid'>Incorrect form data found! Submit disabled. Check input fields</div> ):



Начинаем вводить имя.

  • Пропали сообщения об ошибках.
  • Над кнопкой submit появился другой текст (<div id='myCorrect' *ngIf='myForm.valid'>All form data typed correctly Press submit button to send it ... </div>)
  • В консоли - результат работы метода myFormInput() при вводе каждого символа. Этот же метод поменял кнопку SUBMIT ( this.submitDisabled = false; this.submitButtonText = 'Click to submit data';).



Начнём вводить e-mail.

  • Отрабатывает Validator ( проверяя корректность e-mail адреса)
  • Меняются стили поля ввода (левая граница - INPUT.ng-invalid{...})
  • Меняется кнопка
  • Меняется элемент DIV над кнопкой




Закончим вод - нажмём SUBMIT

Метод выводит в консоль полученные формой данные.





Видео


FormBuilder

Angular FormBuilder облегчает создание форм. Он позволяет создавать элементы управления формы из модели.

Нам понадобятся: FormGroup и FornBuilder (далее - для проверки данных - Validators ).

Импортируем FormBuilder (import { FormGroup, FormBuilder } from '@angular/forms';)

Пользуясь Angular dependancy injection создаём его объект в конструкторе компонента (constructor(private myFb: FormBuilder) { }).

Используем этот объект для создания FormGroup.

Простой пример

Создаём объект типа FormGroup в переменной myForm5 ( myForm5: FormGroup;)

Формируем форму в этом объекте, используя метод group() объекта formBuilder (this.myForm5 = this.myFb.group({name: 'MyName',email: 'e-mail',address: 'Addres string'});)

Компонент

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder } from '@angular/forms'; @Component({ selector: 'app-formbldr', templateUrl: './formbldr.component.html', styleUrls: ['./formbldr.component.css'] }) export class FormbldrComponent implements OnInit { myForm5: FormGroup; constructor(private myFb: FormBuilder) { } ngOnInit() { this.myForm5 = this.myFb.group({ name: 'MyName', email: 'e-mail', address: 'Addres string' }); } mySubmit(){ console.log(this.myForm5.value); } }





HTML шаблон

<form [formGroup]='myForm5' (ngSubmit)='mySubmit()'> <input formControlName='name'> <input formControlName='email'> <button type='submit'>Submit</button> </form>






Пример2

C помощью FormBuilder задаём дополнительные параметры полей ввода: начальное значение, один или несколько валидаторов

Компонент

import { Component, OnInit } from '@angular/core'; import { FormGroup, FormBuilder, Validator, Validators } from '@angular/forms'; @Component({ selector: 'app-formbldr', templateUrl: './formbldr.component.html', styleUrls: ['./formbldr.component.css'] }) export class FormbldrComponent implements OnInit { myForm5: FormGroup; constructor(private myFb: FormBuilder) { this.myForm5 = this.myFb.group({ name: [null, Validators.required ], email: ['', Validators.compose([ Validators.required, Validators.pattern('^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$') ]) ], address: [''] }); } ngOnInit() { } mySubmit() { console.log(this.myForm5.value); } }



Шаблон


<form [formGroup]='myForm5' (ngSubmit)='mySubmit()'> <div class='cntrlGrp'> <label>Name</label> <input formControlName='name'> </div> <div class='cntrlGrp'> <label>email</label> <input formControlName='email'> </div> <div class='cntrlGrp'> <label>address</label> <input formControlName='address'> </div> <div class='cntrlGrp'> <label></label> <button type='submit' [disabled]='myForm5.invalid'>Submit</button> </div> </form>




Стили


FORM { display: grid; grid-auto-flow: row; grid-gap: 10px; } .cntrlGrp { display: grid; grid-auto-flow: column; } INPUT.ng-invalid { border-left: 5px solid red; }



 






Примеры Angular директив

(Angular built in directives)



<H1>Students</H1> <table> <tr> <th>N</th> <th>Name</th> <th>Age</th> <th>Course</th> </tr> <tr *ngFor='let student of students; let n = index'> <td>{{n+1}}</td> <td>Name: {{student['Name']}}</td> <td>Age: {{student['Age']}}</td> <td>Course: {{student['Course']}}</td> </tr> </table> <hr> <h1>WEB students</h1> <table> <tr> <th>N</th> <th>Name</th> <th>Age</th> <th>Course</th> </tr> <ng-container *ngFor='let item of students; let n = index'> <tr *ngIf="item['Course'] == 'WEB'"> <td>{{n+1}}</td> <td>Name: {{item['Name']}}</td> <td>Age: {{item['Age']}}</td> <td>Course: {{item['Course']}}</td> </tr> </ng-container> </table> <hr> <ng-container *ngFor='let student of students'> <div *ngIf="student['Age'] >= 20; then adult; else child">this is ignored</div> <ng-template #adult>Adult: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template> <ng-template #child>Child: {{student['Name'] + ' Age:' + student['Age'] }}<br></ng-template> </ng-container> <hr> <ng-container *ngFor='let student of students; let n = index'> {{n + 1}} <ng-container [ngSwitch]='student["Course"]'> <div *ngSwitchCase='"WEB"' style='color:red'> WEB : {{student['Name']}}<br> </div> <div *ngSwitchCase='"PHP"' style='color:green'> PHP : {{student['Name']}}<br> </div> <div *ngSwitchCase='"C++"' style='color:blue'> C++ : {{student['Name']}}<br> </div> </ng-container> </ng-container>



import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-students', templateUrl: './students.component.html', styleUrls: ['./students.component.css'] }) export class StudentsComponent implements OnInit { students = []; constructor() { } ngOnInit() { this.students = [ {'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '20', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '19', 'Course': 'C++'}, {'Name': 'Ivan', 'Age': '25', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '30', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '19', 'Course': 'C++'}, {'Name': 'Ivan', 'Age': '16', 'Course': 'WEB'}, {'Name': 'Haim', 'Age': '33', 'Course': 'PHP'}, {'Name': 'Kate', 'Age': '10', 'Course': 'C++'} ]; console.log(this.students); } }