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

Question

给定 FormGroup 中的以下代码片段:

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

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

Answer 1

您可以在您的组件 文件中创建一个引用:

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