错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令 - Angular 反应式表单 [英] Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms

查看：34
本文介绍了错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令 - Angular 反应式表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下模板.我正在尝试处理反应式表单，但遇到了问题.

<div class="panel-body"><表格><div class="col-md-12 col-sm-12"><div class="form-group col-md-3 col-sm-6"><label>名字* </label><input formControlName="firstname";类型=文本"class=表单控制输入-sm">

</表单>

</表单>

然后在我的组件中我有:

@Component({选择器:'客人输入'，templateUrl: './guest-input.component.html',})导出类 GuestInputComponent 实现 OnInit {@输入()客人:客人；来宾表格:表格组；构造函数(私有_fb:FormBuilder){}ngOnInit() {this.guestForm = this._fb.group({名字:['测试'，[Validators.required，Validators.minLength(3)]]});}}

这一切对我来说都很好，但出于某种原因，我得到了:

<块引用>

错误:未捕获(承诺):错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup指令并将其传递给现有的 FormGroup 实例(您可以在类中创建一个).

我以为我已经在中声明了这一点.

解决方案

您在带有 FormGroup 指令的表单标签中嵌套了表单标签，删除它:

<div class="panel-body"><表格>->删除这个<div class="col-md-12 col-sm-12"><div class="form-group col-md-3 col-sm-6"><label>名字* </label><input formControlName="firstname";类型=文本"class=表单控制输入-sm">

</表单>->删除这个

</表单>

I have the following template. I'm trying to get to grips with reactive forms but am having a problem.

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form>
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form>
    </div>
</form>

Then in my component I have:

@Component({
    selector: 'guest-input',
    templateUrl: './guest-input.component.html',
})
export class GuestInputComponent implements OnInit {
    @Input()
    guest: Guest;

    guestForm: FormGroup;
    
    constructor(private _fb: FormBuilder) { }

    ngOnInit() {
        this.guestForm = this._fb.group({
            firstname: ['test', [Validators.required, Validators.minLength(3)]]
        });
    }
}

This all looks fine to me but for some reason I am getting:

Error: Uncaught (in promise): Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

I thought I had declared this in my <form>.

解决方案

You have nested form tag inside form tag with FormGroup directive, remove it:

<form [formGroup]="guestForm" novalidate>
    <div class="panel-body">
        <form> -> Remove this
            <div class="col-md-12 col-sm-12">
                <div class="form-group col-md-3 col-sm-6">
                    <label>First Name*  </label>
                    <input formControlName="firstname" type="text" class="form-control input-sm">
                </div>
            </div>
        </form> -> Remove this
    </div>
</form>

这篇关于错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令 - Angular 反应式表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆