![](/img/trans.png)
[英]Error formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
[英]Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive - Angular reactive forms
我有以下模板。 我試圖掌握反應形式,但遇到了問題。
<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)]]
});
}
}
這一切對我來說都很好,但出於某種原因,我得到了:
錯誤:未捕獲(承諾):錯誤:formControlName 必須與父 formGroup 指令一起使用。 您需要添加一個 formGroup 指令並將其傳遞給現有的 FormGroup 實例(您可以在類中創建一個)。
我以為我已經在我的<form>
聲明了這一點。
您在帶有FormGroup
指令的表單標簽中嵌套了表單標簽,將其刪除:
<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>
在modelDrivenForms
, [formGroup]="guestForm"
應該在父元素中
<div class="form-group col-md-3 col-sm-6" [formGroup]="guestForm">
<label>First Name* </label>
<input formControlName="firstname" type="text" class="form-control input-sm">
</div>
當您在沒有 formGroup 的情況下進行表單控制時。
錯誤代碼:
<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input
formControlName="promotionMaterial"
(change)="onChange($event)"
class="tgl tgl-light tgl-primary"
id="promotionMaterial"
type="checkbox"
/>
<label class="tgl-btn m-0" for="promotionMaterial"></label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input formControlName="offer" (change)="onChange($event)" class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
<label class="tgl-btn m-0" for="offer"></label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input
formControlName="termsAndConditions"
(change)="onChange($event)"
class="tgl tgl-light tgl-primary"
id="termsAndConditions"
type="checkbox"
/>
<label class="tgl-btn m-0" for="termsAndConditions"></label>
</div>
</li>
在 [錯誤代碼] 中,我采用了“formControlName”,因此它對我不起作用。
解決方案:
<ul class="list-unstyled noti-list m-0">
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input
[formControl]="promotionMaterial"
class="tgl tgl-light tgl-primary"
id="promotionMaterial"
type="checkbox"
/>
<label class="tgl-btn m-0" for="promotionMaterial"></label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input [formControl]="offer class="tgl tgl-light tgl-primary" id="offer" type="checkbox" />
<label class="tgl-btn m-0" for="offer"></label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="custom-switch ml-auto">
<input
[formControl]="termsAndConditions"
class="tgl tgl-light tgl-primary"
id="termsAndConditions"
type="checkbox"
/>
<label class="tgl-btn m-0" for="termsAndConditions"></label>
</div>
</li>
在解決方案中,我采用 [formControl] 插入 formControlName 其工作正常
這些錯誤不是描述性的......在我的情況下 - 結果我在我的子組件中加倍了formControlName='...'
。
父組件:
<div [formGroup]="formGroup">
<quill-text-editor formControlName="my_control"></quill-text-editor>
</div>
quill-text-editor 組件模板:
<quill-editor
formControlName="my_control" <--- I've deleted this to fix the error
(onFocus)="onEditorFocus()"
(onBlur)="onEditorBlur()"
></quill-editor>
<hr>
<div class="toolbar">
<div class="tool">
(...)
<div class="col-md-12" formArrayName="educations">
</div>
.ts 文件代碼
educations: this.formBuilder.array([]),
或者
<form [formGroup]="manageOrderForm">
</form>
ts 文件代碼從'@angular/router'導入{路由器};
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
manageOrderForm: any;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.