В этом блоге мы увидим, как использовать реактивные формы в angular4.
Мы можем работать с двумя разными типами форм: шаблонными и реактивными формами. В этом посте мы увидим, как использовать реактивные формы на примере.
Angular4 Реактивные формы:
Давайте создадим шаблон формы с обязательными для пользователя полями.
<form> <div> <label>First Name</label> <input type="text" name="first_name"/> </div> <div> <label>Last Name</label> <input type="text" name="last_name"/> </div> <div> <label>Email</label> <input type="text" name="email"/> </div> <button type="submit">Submit</button> <button type="button">Cancel</button> </form>
В приведенном выше шаблоне требования
Имя: должно быть указано уникальное имя.
Фамилия: необходимо указать уникальную фамилию.
Электронная почта: действительный идентификатор электронной почты, который является уникальным и обязательным.
При использовании реактивных форм импортируйте ReactiveFormsModule в ваш app.module.js, а BrowserModule используется для начальной загрузки.
import {NgModule} from '@angular/core'
import {ReactiveFormsModule} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, ReactiveFormsModule ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})
export class AppModule {}
импортировать FormGroup, FormControl, Validators в компонент вашего приложения (классы, связанные с реактивной формой)
- FormGroup — значением будет объект; Каждый элемент объекта должен быть FormControl.
- FormControl — значение представляет собой строку или объект; Это значение по умолчанию для управления формой.
import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core'
@Component({
selector: 'my-app',
templateUrl: 'src/app.component.html'
})
export class AppComponent implements OnInit {
private sampleForm: FormGroup;
constructor() {}
ngOnInit() {
// Create new Form control with all your required fields.
this.sampleForm = new FormGroup({
'first_name': new FormControl(),
'last_name': new FormControl(),
'email': new FormControl(),
});
}
cancel() {
console.log(this.sampleForm);
}
onSubmit() {
console.log('Form successful submit.');
console.log(this.sampleForm.value);
}
}
В приведенном выше примере мы создали FormGroup для упомянутых полей. Теперь нам нужно назначить объект формы (formGroup, formControlName) для HTML следующим образом.
<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()"> <div> <label>First Name</label> <input type="text" name="first_name" formControlName="first_name"/> </div> <div> <label>Last Name</label> <input type="text" name="last_name" formControlName="last_name"/> </div> <div> <label>Email</label> <input type="text" name="email" formControlName="email"/> </div> <button type="submit">Submit</button> <button type="button" (click)="cancel()">Cancel</button> </form>
Когда пользователь нажимает кнопку отправки, функция onSubmit() срабатывает и предоставляет вам данные формы в консоли (здесь вы можете выполнить свою логику), то же самое для отмены.
