Форма Angular 2 "Не удается найти контроль"

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)]]
      });
  }

Но я получаю сообщение об ошибке консоли "Не удается найти элемент управления" продвижение "...

Любая помощь будет оценена!

Answer 1

Это может не быть ответом на оригинальный вопрос, но это может быть полезно, если вы перешли сюда из Google.

Вы должны проверить эти вещи.

1. Вы должны иметь "name"атрибут для всех элементов управления, который имеет [ngModel]

2. Если вы исключите некоторые поля из проверки, затем добавьте [ngModelOptions]="{standalone: true}" (помните первое правило, все же вам нужно "имя")

3. Убедитесь, что у вас есть formControlName атрибут для элементов управления, которые вы собираетесь проверить. (помните первое правило)

Answer 2

Я попытался создать новую FormGroup в моем компоненте. Я импортировал ReactiveFormsModule из angular/forms и добавил в импорт app.module.ts.

но я получаю Не могу найти имя "FormGroup" и не могу найти имя "FormControl" ошибки

Вот мой компонент

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

Добавление приведенного ниже оператора импорта в компонент решило мою проблему.

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

Не ответ на ваш вопрос, а сообщение, поскольку это может помочь кому-то, кто сталкивается с той же ошибкой.