Angular 2 Form“找不到控件”答案

【问题标题】：Angular 2 Form "Cannot Find Control"Angular 2 Form“找不到控件”
【发布时间】：2016-11-30 08:46:02
【问题描述】：

我正在尝试使用 Angular 2 Forms 进行验证，但是当我尝试添加多个控件时。似乎它只是被忽略了。我遵循了许多不同的指南，看看其他人是如何做到的，但这些方法似乎都不起作用。

我一直在做的就是在我的模板中：

<form [formGroup]="form" novalidate (ngSubmit)="save(form.valid)">
<div class="row" id="message-wrapper">
   <label>Message</label>
   <small [hidden]="form.controls.message.valid || (form.controls.message.pristine && !submitted)">
        Message is required (minimum 10 characters).
    </small>
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.message"
        formControlName="message"
        placeholder="This will be sent out by supporters with a URL back to this campaign">
     </textarea>
</div>

<div class="row" id="promo-wrapper">
    <label>Promotion: </label>
    <small [hidden]="form.controls.promotion.valid ||(form.controls.promotion.pristine && !submitted)">
      Promotion is required and should be between 10 and 100 characters
    </small>
    <textarea 
        class="textarea-scaled"
        type="text"
        [(ngModel)]="campaign.promotion"
        formControlName="promotion"
        placeholder="What would you like to be sent out in promotional messages?">
    </textarea>
</div>
</form>

然后在我的组件中我这样做：

form: FormGroup;

  constructor(private builder: FormBuilder,
              private _dataservice: DataService) {

      this.form = builder.group({
          "message": ['', [Validators.required, Validators.minLength(10)]],
          "promotion": ['', [Validators.required, Validators.minLength(10)]]
      });
  }

但我不断收到“找不到控件‘提升’”控制台错误...

任何帮助将不胜感激！

【问题讨论】：

你添加REACTIVE_FORM_DIRECTIVES 到组件了吗？
是的，它在我的指令中。抱歉，我没有显示。
能否请您在 plunker 中重现？
我可以试试，这个应用有点大。可能需要我一段时间。
我发现[(ngModel)] 正在制造问题。

标签： html forms typescript angular

【解决方案1】：

这可能不是原始问题的答案，但如果您从谷歌跳到这里，这可能会很有用。

你需要检查这些东西。

对于所有具有[ngModel]的控件，您必须具有“name”属性
如果您从验证中排除某些字段，则添加[ngModelOptions]="{standalone: true}"（记住第一条规则，您仍然需要一个“名称”）
确保要验证的控件具有formControlName 属性。（记住第一条规则）

【讨论】：

不是这样，但是我得到了错误，因为我忘记在FormGroup初始化中声明key...
如果你有formControlName，你就不需要name attr。

【解决方案2】：

我尝试在我的组件中创建新的 FormGroup。我已经从 angular/forms 导入 ReactiveFormsModule 并添加到 app.module.ts 导入中。

但我收到 Cannot find name 'FormGroup' 和 Cannot find name 'FormControl' 错误

这是我的组件

export class SignupFormComponent {
  form1 = new FormGroup({
    username: new FormControl(),
    password: new FormControl()
  });
}

在组件中添加以下导入语句解决了我的问题。

import { FormGroup, FormControl } from '@angular/forms';

不是您问题的答案，而是发布，因为这可能会帮助面临同样错误的人。

【讨论】：