直接访问 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>

演示版