WEB start

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

hit 
counter

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

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


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

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-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; }