Получить доступ к FormControl в FormGroup внутри FormArray

Question

Я пытаюсь реализовать автозамену материала в formcontrol в formarray, но когда я пытаюсь получить доступ к formcontrol в файле ts, он не может получить к нему доступ. Кто-нибудь может мне помочь, пожалуйста.

HTML-файл:

<div formArrayName="applicants">
          <div *ngFor="let applicant of appForm.controls.applicants.controls; let i=index; let last = last">
            <div [formGroupName]="i">
              <div class="row">
                <label for="applicant_short_name" class="col-sm-3 form-control-label">Applicant {{i+1}}</label>
                <div class="col-sm-7">
                  <div class="form-group">
                    <!-- <input type="text" formControlName="applicant_short_name" class="form-control" id="inputFirstName" placeholder="Applicant"> -->
                    <!-- <mat-form-field > -->
                      <input  type="text" class="form-control" id="inputFirstName" placeholder="Applicant" [matAutocomplete]="auto" [formControlName]="applicant_short_name">
                      <mat-autocomplete #auto="matAutocomplete">
                        <mat-option *ngFor="let state of filteredNames | async | slice:0:3" [value]="name">
                          <span>{{ name }}</span>
                        </mat-option>
                      </mat-autocomplete>
                    <!-- </mat-form-field> -->
                  </div>
                </div>

TS файл:

    this.appForm.controls.applicants.controls[0].controls.applicant_short_name.valueChanges.subscribe(val => {
    this.filterNames(val);
 });

где appform - это мои кандидаты в formgroup - formarray заявители, короткое имя - formcontrol.

на данный момент, control [0] выдает ошибку, что в AbstractControl не существует элементов управления.

Может кто-нибудь помочь мне здесь?

Заранее спасибо!

Answer 1

Вы должны определить свои типы объектов как конкретные классы, а не полагаться только на интерфейс. Я предполагаю что appForm определяется как FormGroup или же FormArray где-то в вашем коде (вы должны показать весь соответствующий код). Но controls член обоих классов возвращает AbstractControl[] и AbstractControl интерфейс не имеет controls член - это определяется только на уровне класса в FormGroup а также FormArray, Итак, если вы используете FormGroups, вам нужно привести:

const outerGroup: FormGroup = this.appForm.controls.applicants as FormGroup;
const innerGroup: FormGroup = outerGroup.controls[0] as FormGroup;
innerGroup.controls.applicant_short_name.valueChanges.subscribe(val => {
    this.filterNames(val);
});

Вы также можете просто вставить оператор в строку, но это будет очень грязно читать.