javascript - Dynamisk formulärkontroll för adress (land, delstat, distrikt och plats)

Jag lägger till dynamisk formulärkontroll vid ändring av rullgardinsmeny, jag kan lägga till men får fel och kan inte heller få värdet i formName.value,

Jag får ett fel

Fel: Det finns ingen FormControl-instans kopplad till formulärkontrollelementet med namn: 'countryName'

Min kod

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

Nedan är min HTML-kod

<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>

Svar #1

Försök lägga till kontroll med "addControl":

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

Å andra sidan kan du återfå kontrollen med:

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

eller :

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

Innan du använder if() skriv ut värdet på ditt formulär med:

this.form.controls

Denna kod kommer att ge dig mycket bra information om statusen på ditt formulär