angular - 错误 : formControlName must be used with a parent formGroup directive. 您需要添加一个 formGroup 指令 - Angular react 形式

Question

我有以下模板。我正在尝试掌握响应式表单，但遇到了问题。

<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>

然后在我的组件中我有:

@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)]]
        });
    }
}

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

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

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

Answer 1

你在带有 FormGroup 指令的 form 标签内嵌套了 form 标签，将其移除:

<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>