Бесконечный цикл при перезагрузке formArray, динамически создаваемого внутри formGroup - PullRequest
Новая
       29

Бесконечный цикл при перезагрузке formArray, динамически создаваемого внутри formGroup

1 голос
/ 16 апреля 2019

У меня также есть классы и компоненты Client и Adresse, которые сделаны с помощью angular, у клиента есть набор адресов, у меня есть клиент-форма группы форм с адресами в виде массива форм. когда я пытаюсь перезагрузить клиент и форму адреса с данными, в результате получается больше, чем ожидалось, формы адреса, и они пусты. В чем проблема? 

 export class ClientService {
  private url = environment.apiUrl;
  private endpoint = 'client';
  constructor(private http: HttpClient, private fb: FormBuilder) {}

 formClient = this.fb.group({
    id: [null],
    nom_Client: ['', Validators.required],

    }),
    adresses: this.fb.array([this.addAdresseGroup()]),

  });
  addAdresseGroup() {
    return this.fb.group({
      id:[null],
      pays: ['', Validators.required],
      region: ['', Validators.required],
      cite: ['', Validators.required],
         })
  }
  addAdresse() {
    this.adresseArray.push(this.addAdresseGroup());
    console.log('adresse group array',this.addAdresseGroup());
    this.formClient.markAsDirty();

  }
  removeAdresse(index:number){
    this.adresseArray.removeAt(index);
  }
  get adresseArray(){
    return <FormArray> this.formClient.get('adresses');
  }}

export class DetailClientComponent implements OnInit {
  titre='Ajout nouveau client';
  dataModel: any; //active model
  constructor(
    private dialog: MatDialogRef<DetailClientComponent>,
    public clientServ: ClientService, private adresseServ: AdresseService
  ) {}

  ngOnInit() {
    if (this.clientServ.formClient.get('id').value) {
      this.loadClient();
       this.loadAdresse();
    }
      }

  loadClient() {
    this.clientServ
      .detailClient(this.clientServ.formClient.get('id').value)
      .pipe(take(1))
      .subscribe((res:Client) => {
       this.clientServ.formClient.patchValue(res as Client);     
        this.titre='Modification du client: '+this.clientServ.formClient.controls['nom_Client'].value;
      });
  }
loadAdresse(){
  this.adresseServ.listAdressebYClientId(this.clientServ.formClient.get('id').value).pipe(take(1)).subscribe((res:Adresse[])=>{
    for (let adres = 0; adres < res.length; adres++){
      const AdresseFormArray = this.clientServ.formClient.get("adresses") as FormArray;
      AdresseFormArray.push(this.clientServ.addAdresseGroup());}
       this.clientServ.adresseArray.patchValue(res);
    }
  );
}

  onClear() {
    this.clientServ.formClient.reset();
    // this.clientServ.adresseArray.reset();
  }
  onSubmit() {
    if (this.clientServ.formClient.valid) {         
      this.dialog.close(this.clientServ.formClient.value);
      this.onClear();
    }
  }
  onClose() {
    this.clientServ.formClient.reset();  
    this.clientServ.adresseArray.reset();  
    this.dialog.close();
  }
  displayaddAdress(a:FormArray,b:number):boolean{

    return a.length>b+1;
  }
  displayRemoveButton(a:FormArray){
  return a.length===1;
  }

 <div formArrayName="adresses" class="box">
                <div *ngFor="let gr of clientServ.adresseArray.controls; let i= index" [formGroupName]="i">

                <div class="box">
                   <label style="margin-left:52px ">Adresse {{i+1}}</label>
                  <span class="fill-remaining-space"></span>
                    <button mat-icon-button color="primary" [disabled]="displayaddAdress(clientServ.adresseArray,i)" (click)="clientServ.addAdresse()"><mat-icon>add_circle</mat-icon> </button>
                    <button mat-icon-button color="warn"  [disabled]="displayRemoveButton(clientServ.adresseArray)" (click)="clientServ.removeAdresse(i)"><mat-icon>remove_circle</mat-icon></button>
                </div>
               <mat-divider [inset]="true"></mat-divider>
                <div class="box">
                    <input type="text" matInput formControlName="id" placeholder="id" hidden >

                <mat-form-field class="controles-container">
                    <input type="text" matInput formControlName="pays" placeholder="Pays" required>
                    <mat-error *ngIf="gr.get('pays').hasError('required')">le pays  est obligatoire!</mat-error>
                  </mat-form-field>
                <mat-form-field class="controles-container">
                    <input type="text" matInput formControlName="region" placeholder="Region" required >
                  <mat-error *ngIf="gr.get('region').hasError('required')">la region  est obligatoire!</mat-error>
                  </mat-form-field>
               <div class="controles-container">
                <mat-form-field class="description">
                    <input type="text" matInput formControlName="cite" placeholder="Cite" required >
                    <mat-error *ngIf="gr.get('cite').hasError('required')">la cite  est obligatoire!</mat-error>
                  </mat-form-field>
               </div>
               </div>
            </div>
           </div>

например, у клиента есть 2 адреса, фактический результат - 2 ожидаемых адреса и больше пустых адресов, пока я закрываю и перезагружаю компонент, так как я могу это исправить? Заранее благодарю за ответ.

...