angular - 直接访问 FormControl 元素而不是使用 form.get

Question

给定 a 中的以下代码片段FormGroup：

<input type="email" class="form-control form-control-lg" formControlName="email" placeholder="email">

无论如何我可以使用引用变量（例如）而不是使用来访问模板中（而不是从 .ts 文件）中输入的值，这form.get('email')...有什么好处吗？

Answer 1

您可以在component文件中创建参考：

group: FormGroup;
emailCtrl: FormControl;
// other controls

ngOnInit() {
  this.emailCtrl = this.formBuilder.control(
    '',
    [
      Validators.required,
      Validators.email
    ]);

  this.group = this.formBuilder.group({
    email: this.emailCtrl
    // other controls
  });
}

所以，在模板中：

<form novalidate [formGroup]="group">
  <input type="email" placeholder="email" [formControl]="emailCtrl">
  email value = {{emailCtrl.value}}
</form>

演示