javascript - დინამიკური ფორმის კონტროლი მისამართისთვის (ქვეყანა, შტატი, რაიონი და ადგილი)


მე ვამატებ დინამიკურ ფორმის კონტროლს dropdown-ის ცვლილების დროს, მე შემიძლია დამატება, მაგრამ ვიღებ შეცდომას და ასევე ვერ ვიღებ მნიშვნელობას formName.value-ში,

მიღება ვ მიიღებ შეცდომას

შეცდომა: ფორმის კონტროლ ელემენტთან სახელწოდებით 'countryName' არ არის დაკავშირებული FormControl ინსტანცია

ჩემი კოდი

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>

პასუხი #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

ეს კოდი მოგცემთ ძალიან კარგ ინფორმაციას თქვენი ფორმის სტატუსის შესახებ