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

您沒有正確關閉表單標簽（）。

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

如果這不是問題，請檢查是否已在模塊中導入了reactformsmodules。

Answer 2

除了缺少的標記外，在使用反應性表單時，不需要模板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（），...）