WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Angular forms
Использование форм в 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-touched | ng-untouched |
| Значения элемента изменено (value has changed) | ng-dirty | ng-pristine |
| Значение элемента формы верно (value is valid) | ng-valid | ng-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;
}
