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（），...）

Angular 7 FormControlName给出控制台错误

2 个答案: