[英]Angular how can I access to reactive form control nested component's controls?
我的问题是,如何访问 exampleForm 的 FormControl 'moreFields' 的状态? 我的问题是我看不到 FormControl 'moreFields' 的控件所以看下面的代码片段,我不明白为什么看不到表单控件,例如 exampleForm.get('moreFields').get(fieldone)
这是示例表单模板的一部分:
<form class="form-border spacer-vertical" [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)" autocomplete="off" novalidate>
<more-fields-component formControlName="moreFields"></more-fields-component>
<button class="btn btn-primary" type="submit" [disabled]="exampleForm.invalid">Submit</button>
</form>
这是 exampleForm 代码片段,它包含一个名为 moreFields 的字段,它是一个响应式表单组件:
ngOnInit() {
this.exampleForm = this.fb.group({
moreFields: [null]
});
this.exampleForm.get('moreFields').valueChanges.subscribe((value: IMoreFields) => {
console.log('MoreFields model changed ' + JSON.stringify(value));
});
}
这是 MoreFieldsComponent 的模板,它包含两个字段:
<form [formGroup]="moreFieldsForm" (ngSubmit)="onDone(moreFieldsForm)" autocomplete="off" novalidate>
<div class="more-fields-layout">
<div class="form-group">
<label class="text-primary">Field One
<span class="warning-text">*</span>
</label>
<input class="spacer-horizontal" type="text" formControlName="fieldone">
<div class="text-danger"
*ngIf="(extractFormControl('fieldone').touched && extractFormControl('fieldone').invalid) ||
(extractFormControl('fieldone').dirty && extractFormControl('fieldone').invalid)">
<p *ngIf="extractFormControl('fieldone').errors.required">Field one required!</p>
<p *ngIf="extractFormControl('fieldone').errors.minlength">Field one must be greater the min {{ extractFormControl('fieldone').errors.minlength.requiredLength }}
characters long, the actual length is {{ extractFormControl('fieldone').errors.minlength.actualLength}} characters!</p>
<p *ngIf="extractFormControl('fieldone').errors.maxlength">Field one must be less than {{ extractFormControl('fieldone').errors.maxlength.requiredLength }}
characters long, the actual length is {{ extractFormControl('fieldone').errors.maxlength.actualLength}} characters!</p>
</div>
</div>
<div class="form-group">
<label class="text-primary">Field Two
<span class="warning-text">*</span>
</label>
<input class="spacer-horizontal" type="text" formControlName="fieldtwo">
<div class="text-danger"
*ngIf="(extractFormControl('fieldtwo').touched && extractFormControl('fieldtwo').invalid) ||
(extractFormControl('fieldone').dirty && extractFormControl('fieldone').invalid)">
<p *ngIf="extractFormControl('fieldtwo').errors.required">Field two required!</p>
<p *ngIf="extractFormControl('fieldtwo').errors.minlength">Field two must be greater the min {{ extractFormControl('fieldtwo').errors.minlength.requiredLength }}
characters long, the actual length is {{ extractFormControl('fieldtwo').errors.minlength.actualLength}} characters!</p>
<p *ngIf="extractFormControl('fieldtwo').errors.maxlength">Field two must be less than {{ extractFormControl('fieldtwo').errors.maxlength.requiredLength }}
characters long, the actual length is {{ extractFormControl('fieldtwo').errors.maxlength.actualLength}} characters!</p>
</div>
</div>
</div>
</form>
这是 MoreFieldsComponent 代码片段,有两个字段:
isDisabled = false;
private fieldoneValidators = [];
ngOnInit() {
this.moreFieldsForm = this.fb.group({
fieldone: [{ value: null, disabled: this.isDisabled }],
fieldtwo: [{ value: null, disabled: this.isDisabled }]
}, 'submit';
this.setupValidators();
...
}
setupValidators() {
this.fieldoneValidators = [];
this.fieldoneValidators.push(Validators.required);
this.fieldoneValidators.push(Validators.minLength(5));
this.fieldoneValidators.push(Validators.maxLength(20));
}
const fieldOnFormControl = this.complexNameForm.get('fieldone');
fieldOneFormControl.setValidators(this.fieldoneValidators);
fieldOneFormControl.updateValueAndValidity();
...
}
extractFormControl(controlName: string): FormControl {
return <FormControl>this.moreFieldsForm.get(controlName);
}
你可以尝试类似的东西
this.exampleForm.get('moreFields.fieldone');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.