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

Question

鉴于FormGroup中的以下代码段：

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

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

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>

DEMO