地址(国家、州、地区和地方)的动态表单控制

Question

我正在添加动态表单控制上的下拉更改，我能够添加，但得到错误，也不能在formName.value中获得值，

我得到错误

错误:没有FormControl实例附加到名称:'countryName'的表单控件元素

我的代码

ngOnInit(): void {
this.getFormControlsFields(Object.keys(this.countryKey)[0]);
}
getFormControlsFields(field: string) {
const formGroupFields: any = {};
formGroupFields[field] = new FormControl('');
this.formFields.indexOf(field) === -1 && this.formFields.push(field);
this.contactForm = new FormGroup(formGroupFields);
}

handleChange(value: any, type: string) {
if (type === 'countryName') {
this.getFormControlsFields(Object.keys(this.countryKey.states.s1)[0]);
this.removeFormControls(['districtName', 'placeName']);
this.fieldValues = {
...this.fieldValues,
stateName: this.getFilteredList(secondLevelArr, value)
};
}
}

下面是我的HTML代码

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<div *ngFor="let field of formFields">
<mat-form-field *ngIf="field" appearance="fill" class="w-100-per">
<mat-label>{{field | titlecase}}</mat-label>
<mat-select [formControlName]="field" (selectionChange)="handleChange($event.value, field)">
<mat-option *ngFor="let value of fieldValues[field]" [value]="value.id">{{value.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<button type="submit" mat-raised-button color="primary">Submit</button>
</form>

Answer 1

尝试添加"addControl";

this.contactForm.addControl(
'countryName',
new FormControl(
'', // yourFirsState
Validators.required))

另一方面，您可以使用:

检索控件

const nameControl = this.contactForm.get('countryName');

或:

this.contactForm.controls['countryName'].value

在使用if()方法打印表单的值之前:

this.form.controls

这段代码会给你关于你的表单状态的非常好的信息