угловое заполнение данных с помощью formArray - PullRequest
Новая
       35

угловое заполнение данных с помощью formArray

0 голосов
/ 06 мая 2019

Я пытаюсь отобразить значения formarray, которые были добавлены ранее. 

component.ts

this.companyForm = this.fb.group({
   id: [],
   company_details: this.fb.group({
    ----
   }),
   company_ip_addresses: this.fb.array([this.fb.group({
    start_ip: new FormControl(),
    end_ip: new FormControl()
  })]),
});

addItem(): void {
let control = <FormArray>this.companyForm.controls.company_ip_addresses;
control.push(this.fb.group({
  start_ip: new FormControl(),
  end_ip: new FormControl()
}));
}

deletefield(index){
  let control = <FormArray>this.companyForm.controls.company_ip_addresses;
  control.removeAt(index)
}

component.html 

<div formArrayName="company_ip_addresses">
          <div *ngFor="let item of companyForm.get('company_ip_addresses').controls; let i=index; let isFirst = first">
            <ng-container [formGroupName]="i">

            <div fxLayout="row wrap" fxLayoutAlign="space-around center">
              <div fxFlex="30">
                <mat-form-field class="example-full-width" class="w-90-p">
                  <input matInput placeholder="START IP" formControlName="start_ip">
                </mat-form-field>
              </div>
              <div fxFlex="30">
                <mat-form-field class="example-full-width" class="w-90-p">
                  <input matInput placeholder="END IP" formControlName="end_ip">
                </mat-form-field>
              </div>

              <div fxFlex="30">
                <div *ngIf="isFirst;then addfield else delete">
                </div>
                <ng-template #addfield>
                  <button mat-icon-button class="text-center" (click)="addItem()">
                    <mat-icon class="font-weight-900">add</mat-icon>
                  </button>
                </ng-template>
                <ng-template #delete>
                  <button mat-icon-button class="text-center" (click)="deletefield(i)">
                    <mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
                  </button>
                </ng-template>
              </div>
            </div>
          </ng-container>
          </div>
        </div>

Ответ от API для этого formArray выглядит следующим образом: 

company_ip_addresses: Array(2)
 0: {id: 1, start_ip: "111.111.111.1", end_ip: "123.123.123.1", created_by: 18, modified_by: 18, …}
 1: {id: 2, start_ip: "111.111.111.2", end_ip: "111.111.111.3", created_by: 18, modified_by: 18, …}

Перед формированием PatchValue я связываю данные, как показано ниже: 

this.companyForm.controls.company_ip_addresses = this.fb.array([new FormControl()]);
  let ip_addresses = this.companyForm.get('company_ip_addresses') as FormArray;
  for (let i = 1; i < this.companyData.viewData.company_ip_addresses.length; i++) {
    //ip_addresses.push(new FormControl(''));
    ip_addresses.push(this.fb.group({
      start_ip: new FormControl(''),
      end_ip: new FormControl('')
    }));
  }

 this.companyForm.patchValue(this.companyData.viewData);

Отображение ошибки как : Не удается найти элемент управления с путем: 'company_ip_addresses -> 0 ->end_ip '

В шаблоне отображается только второй элемент, но не отображается первый элемент. Я хочу показать все добавленные элементы, которые будут отображаться в шаблоне.Любая помощь.Я новичок в угловой

1 Ответ

0 голосов
/ 06 мая 2019

В Component.ts добавьте оператор get в массив форм IP-адресов компании, как показано ниже: 

 get companyIpAddressFormArray() { return (<FormArray>this.companyForm.get('company_ip_addresses')) ; }

Теперь в HTML, измените оператор ngFor как 

*ngFor="let item of companyIpAddressFormArray.controls"

Надеюсь, это сработает

...