我有以下模板.我正在努力处理react 性形式,但遇到了问题.

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

这一切在我看来都很好,但出于某种原因,我得到了:

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

我以为我已经在<form>岁的时候宣布了这一点.

推荐答案

您已使用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>

Angular相关问答推荐

当try 使用Angular和PrimeNg手动聚焦输入时,我做错了什么?

Angular 环境本地无文件替换

Ng serve不工作,没有错误或消息来显示问题所在

如何将 Firebase 云消息传递 (FCM) 与 Angular 15 结合使用?

如何处理后端删除元素后元素列表的刷新

Angular,数据显示在控制台但不在应用程序中

Angular 14 类型表单 - 数字控件的初始值

如何将我的数组数据转换为逗号分隔的字符串

如何以Angular 显示动态视图模型

带有数据的 Angular 模板

如何在 Angular 2 中使用 protractor ?

如何 use/import http模块?

Angular [disabled]="MyBoolean" 没有工作

Angular CLI 自定义 webpack 配置

Angular 6在输入键上添加输入

Angular 2 router.navigate

Angular 2 可用的 yeoman 生成器

Angular 2:将外部js文件导入组件

如何在 Angular cli 项目中包含来自 node_modules 的assets

ng-template 上的 *ngFor 不输出任何内容