Question

我正在尝试使用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)]]
      });
  }

但我一直得到一个＆＃34;无法找到控制＆＃39;促销＆＃39;＆＃34;控制台错误......

任何帮助将不胜感激！

Answer 1

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

你需要检查这些事情。

您必须拥有＆＃34; name＆＃34;具有[ngModel]
如果从验证中排除某些字段，请添加[ngModelOptions]="{standalone: true}"（请记住第一条规则，但仍需要＆＃34;名称＆＃34;）
确保您要验证的控件具有formControlName属性。（记住第一条规则）

Answer 2

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

但是我得到找不到名字'FormGroup'和找不到名字'FormControl'错误

这是我的组件

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

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

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

不是您问题的答案，但发布此内容可能有助于遇到同样错误的人。

Angular 2 Form＆＃34;无法找到控制＆＃34;

2 个答案: