Angular 表單1 響應式表單

Angular 提供了兩種不一樣的方法來經過表單處理用戶輸入：響應式表單和模板驅動表單。 本節先講響應式表單。 最終實例demo app-component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

import { UserService, User } from './user.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  user$: Observable<User>;

  constructor(
    private formBuilder: FormBuilder,
    private userService: UserService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      firstName: ['Jack', Validators.required],
      lastName: ['Jones', Validators.required],
      about: []
    });
  }

  submit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

複製代碼

app-component.html

<form [formGroup]="form" (ngSubmit)="submit()">
  <label for="firstname">First Name</label>
  <input id="firstname" formControlName="firstName" />
  <div *ngIf="form.controls.firstName.errors?.required && form.controls.firstName.touched" class="error">
    *Required
  </div>

  <label for="lastname">Last Name</label>
  <input id="lastname" formControlName="lastName" />
  <div *ngIf="form.controls.lastName.errors?.required && form.controls.lastName.touched" class="error">
    *Required
  </div>

  <label for="about">About</label>
  <textarea id="about" formControlName="about"></textarea>

  <button [disabled]="!form.valid">Save Profile</button>
</form>
複製代碼

須要注意的幾點：

1. 使用響應式表單，須要組件所在的module引入ReactiveFormsModule 該module提供了不少指令。好比已Accessor結尾的，如NumberValueAccessor 是專門處理, RadioControlValueAccessor 處理 等等。
2. 模板中表單元素須要綁定FormControlName屬性與TS中定義的FormControl匹配。 TS中的定義表單可使用FormControl，若是嫌麻煩，有更簡便的FormBuilder.group

this.personForm = this.formBuilder.group({
  username: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  age: ['', Validators.required],
  ...
});
// 也能夠寫成
this.personForm = new FormGroup({
  username:  new FormControl('',  Validators.required),
  email:  new FormControl('', Validators.required),
});
複製代碼

3. 表單元素上面不要同時出現formControlName和ngModel 如 <input formControlName="first" [(ngModel)]="value">。使用formControlName實際已經隱含綁定了ngModel。