Angular Reactive Form 响应式表单 (formControl)

昨天我们看了 一长串的表单使用范例
都是经过理解消化後所写出来的 code ，那麽今天就来聊一聊消化的过程吧！

表单宣告

一开始 建立一个新的 form 表单，它会是一组的 group

export class FormComponent implements OnInit {
  form!: FormGroup;
}

form 後面加上! 是 Typescript 2.0 的 non-null
可参考 非空断言运算子（ ! ） > Non-null assertion operator

一开始 form 里 没有给他任何的属性与值，所以初始化时可使用 FormBuilder 来生成一个表单，在 formBuilder.group 里会自动产生一个 FormControl 让预设的值塞入，预设为空值

this.form = this.formBuilder.group({
  name: "",
  phone: "",
});

对应到 html 上的

<form [formGroup]="form">
  <div>
    <label for="">name：</label>
    <input formControlName="name" type="text" />
  </div>
  <div>
    <label for="">phone：</label>
    <input formControlName="phone" type="tel" />
  </div>
</form>

注意：form 表单里的 FormControl 必须与 template 里的 formControlName 互相对应，不然会报错

如图： 这是 form 里没有命名为 phone 的 FormControl，所以出现了以下错误，这时後会觉得 Angular 非常的贴心 XD

另一种宣告方式

因为我已经知道我的 form 表单里会需要有哪些内容
所以我在一开始的时後就直接将 form 里所需操控的部份设定好

export class FormComponent implements OnInit {
  form: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl(),
  });
}

预设为空值，若需要带预设值的时後会在 ngOnInit 里读到值後再将值变更塞入

ngOnInit(): void {
   this.form.setValue({
    name: 'Mandy',
    phone: '0912345678',
  });
}

取得表单里的资料

.ts

this.form.value;

取得特定资料

.ts

// 取得 name 的值
this.form.get("name").value;

参考资料：

• 响应式表单
• FormControl Api

明天就来说说 formArray 的部份