错误:formControlName必须与父formGroup指令一起使用.您将需要添加formGroup指令-Angular反应形式

问题描述

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

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:

我以为我已经在我的<form>中声明了这一点.

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

推荐答案

您已使用FormGroup指令将表单标签嵌套在表单标签中，将其删除:

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反应形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！