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

【问题标题】：Accessing FormControl elements directly instead of using form.get直接访问 FormControl 元素而不是使用 form.get
【发布时间】：2017-10-05 21:26:55
【问题描述】：

给定FormGroup 中的以下代码 sn-p：

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

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

【问题讨论】：

标签： angular reactive-forms angular-reactive-forms

【解决方案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

【讨论】：

谢谢，我希望我可以使用formControlName 或其他属性直接引用模板中的组件，而不必在我的组件中为其创建属性。