我有以下模板。我正在尝试掌握反应形式,但遇到了问题。
<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 实例(您可以在类中创建一个实例(。
我以为我已经在我的<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>
在解决方案中,我采用 [表单控件] 而不是表单控件名称其工作正常
这些错误不是描述性的...就我而言 - 事实证明,我的子组件内部formControlName='...'
翻了一番。
父组件:
<div [formGroup]="formGroup">
<quill-text-editor formControlName="my_control"></quill-text-editor>
</div>
羽毛笔文本编辑器组件模板:
<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">
(...)
所以问题是,如果你只有一个表单控件,你甚至需要一个表单组吗?
就我而言,我必须通过 registerOnChange 方法将我的输入值传递给 #ControlValueAccessor 父组件。
当我在窗体组中设置窗体控件时,一切都是阳光和玫瑰,否则我会收到相同的错误。
<mat-form-field appearance="fill">
<mat-label > label</mat-label>
<input matInput formControlName="planValue">
</mat-form-field>
与以下各项相比:
<form [formGroup]="valueFG" >
<mat-form-field appearance="fill">
<mat-label > label</mat-label>
<input matInput formControlName="planValue">
</mat-form-field></form>
<div class="col-md-12" formArrayName="educations">
</div>
TS 文件代码
educations: this.formBuilder.array([]),
或
<form [formGroup]="manageOrderForm">
</form>
TS 文件代码从"@angular/路由器"导入 { 路由器 };
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
manageOrderForm: any;
}