Saya telah membuat formulir reaktif dinamis yang dengannya saya dapat menambah atau menghapus bidang secara dinamis, semuanya berfungsi dengan baik. Ketika saya mengklik tanda + di bawah ini, saya mendapatkan hasilnya sebagai -

Tautan StackBlitz - https:// /stackblitz.com/edit/example-angular-material-reactive-form-srphtz?file=app/app.component.html

enter image description here

enter image description here

Saya ingin menghapus Tombol Radio (Dan / Atau) dari baris terakhir selalu seperti jika 3 baris, saya hanya ingin untuk 1 dan 2, seharusnya tidak muncul untuk ketiga. Saya mencoba banyak tetapi saya tidak dapat mencapainya.

Html saya -

 <form id="form" [formGroup]="queryOptionsForm" (ngSubmit)="onSubmit()">
            <div formArrayName="dynamics"
                *ngFor="let a of queryOptionsForm.get('dynamics').value; let i = index ; trackBy: trackByFn">
                <div fxLayoutGap="10px" style="margin-top: 15px; margin-left: 15px;" fxLayout [formGroupName]="i">

                      <mat-form-field appearance="outline">
                        <mat-label>Field</mat-label>
                        <mat-select formControlName="field">
                          <mat-option *ngFor="let food of foods" [value]="food.value">
                            {{food.viewValue}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>

                      <mat-form-field appearance="outline">
                        <mat-label>Operator</mat-label>
                        <mat-select formControlName="operator">
                          <mat-option *ngFor="let food of foods" [value]="food.value">
                            {{food.viewValue}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>

                    <mat-form-field appearance="outline">
                        <mat-label>Value</mat-label>
                        <input matInput type="text" autocomplete="off" formControlName="value">
                    </mat-form-field>
                    
                    <div class= "operators" *ngIf="!disableRemove">
                        <mat-radio-group appearance="outline" formControlName="andOr" aria-label="Select an option">
                            <mat-radio-button value="1">And &nbsp;</mat-radio-button>
                            <mat-radio-button value="2">Or</mat-radio-button>
                          </mat-radio-group>
                    </div>
                    <div class= "operators">
                    <button type="button" mat-icon-button [disabled]="disableRemove == true"
                    (click)="removeDynamics(i)">
                    <mat-icon [ngClass]=" disableRemove == true? 'removeClassDisabled' : 'removeClass'" style="cursor: pointer">remove</mat-icon>
                </button>
                <button type="button" mat-icon-button color="primary" (click)="addDynamics()">
                    <mat-icon class="addCLass" style="cursor: pointer">add_box</mat-icon>
                </button>
            </div>
                </div>

            </div>
            <br>
            <br>
            <br>
</form> 

Ts saya -

     constructor(public router: Router , private fb:FormBuilder) {
    
   }

  ngOnInit() {
    this.opened = true;
    this.queryOptionsForm = this.fb.group({
      dynamics: this.fb.array([this.newDynamics()]) ,
    });

    this.dynamic = this.queryOptionsForm.get('dynamics') as FormArray;
    if (this.dynamic.length == 1) {
        this.disableRemove = true;
    }
    
    //this.router.navigate(['/reports/searchReport']);
  }

  dynamics() : FormArray {
    return this.queryOptionsForm.get("dynamics") as FormArray
  }
   
  newDynamics(): FormGroup {
    return this.fb.group({
      field: '',
      operator: '',
      value:'',
      andOr:''
    })
  }
   
  addDynamics() {
    this.dynamics().push(this.newDynamics());
    this.disableRemove = false;
  }
   
  removeDynamics(i:number) {
    this.dynamics().removeAt(i);
    if (
      (this.queryOptionsForm.get('dynamics') as FormArray).length == 1
    ) {
      this.disableRemove = true;
    }
  }
   
  onSubmit() {
    console.log(this.queryOptionsForm.value);
  }

  trackByFn(index, item) {
    return index;
  }

P.s - Saya mencoba dengan -

 <div class= "operators" *ngIf="!disableRemove && i == this.dynamic.length">
                            <mat-radio-group appearance="outline" formControlName="andOr" aria-label="Select an option">
                                <mat-radio-button value="1">And &nbsp;</mat-radio-button>
                                <mat-radio-button value="2">Or</mat-radio-button>
                              </mat-radio-group>
                        </div>

Dapatkah seseorang tolong bantu?

Tautan StackBlitz - https:// /stackblitz.com/edit/example-angular-material-reactive-form-srphtz?file=app/app.component.html

1
angular_code 12 Mei 2021, 20:45

1 menjawab

Jawaban Terbaik

Cukup gunakan di *ngFor, let last=last dan *ngIf="!last" lihat dokumen

<div formArrayName="dynamics"
      *ngFor="let a of queryOptionsForm.get('dynamics').value; 
      let i = index ;
      let last=last;  <!--add the let last=last-->
      trackBy: trackByFn">
   ...
   <div class= "operators" *ngIf="!last">
     ...
   </div>
 </div>
1
Eliseo 12 Mei 2021, 18:10