Angular 7 FormControlName выдает консольную ошибку

Question

У меня есть реактивная форма на моей веб-странице, но выдает ошибку, которая выглядит следующим образом:

ОШИБКА Ошибка: formControlName должно использоваться с родительской директивой formGroup.Вы захотите добавить директиву formGroup и передать ей существующий экземпляр FormGroup (вы можете создать его в своем классе).

Я не понимаю, почему я получаю эту ошибку, потому что у меня естьЭкземпляр formGroup.

Это мой HTML:

<form [formGroup]="singleRecipientForm">
    <textarea #textInput placeholder="user e-mail" formControlName="email"></textarea>
    <button type="submit" (click)="sendMailTextInput(textInput.value)">Send invite </button>
</form

И моя машинопись выглядит так:

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.singleRecipientForm = this.formBuilder.group({
      email: ['', [Validators.required]],
    });
}

Я понятия не имею, почему эта ошибка появляется.

Answer 1

Помимо отсутствующего тега, когда вы используете Реактивные формы, вам не нужен шаблон ref для получения входного значения.

singleRecipientForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
this._buildForm();

}
private _buildForm(): void {
        this.singleRecipientForm = this.formBuilder.group({
      email: New FromControl('', Validators.required)
    });
}
public sendMailTextInput(): any {
console.log(this.singleRecipientForm.value)
}

, и ваш HTML будет (click)="sendMailTextInput()", а затем делать все, что вы хотите с вводом текста.Реактивные формы поставляются с рядом методов, которые могут облегчить вашу разработку (valueChanges (), ...)

Answer 2

Вы неправильно закрыли тег формы ().

 <form [formGroup]="singleRecipientForm">
        <textarea #textInput placeholder="user e-mail" formControlName="email"></textarea>
        <button type="submit" (click)="sendMailTextInput(textInput.value)">Send invite </button>
    </form>

Если проблема не в этом, убедитесь, что вы импортировали модуль реактивной формы в свой модуль.ts