在 Angular 更新 CRUD 表单上显示数组中的多个对象

Question

我目前能够编辑更新 CRUD 表单中的所有数据，动态嵌套数组（称为 'mitigations'）除外，它只是 returns 我表单上的第一个对象。我有 4 个对象，但它只显示了 4 个中的 1 个，我希望最终用户能够通过他们最初创建的相同表单来编辑所有这些对象。我还希望他们能够添加新的缓解措施或删除现有的缓解措施，因为他们可以使用创建 CRUD 表单。

请让我知道我缺少什么。谢谢

edit.component.ts

export class EditComponent implements OnInit {

  getId: any;
  updateForm: FormGroup;
  
  constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private activatedRoute: ActivatedRoute,
    private crudService: CrudService
  ) {
    this.getId = this.activatedRoute.snapshot.paramMap.get('id');

    this.crudService.GetRisk(this.getId).subscribe(res => {
      this.updateForm.setValue({ 
       ...
        mitigations: res['mitigations']
      });
    });

    this.updateForm = this.formBuilder.group({
      ...
      mitigations: this.formBuilder.array([])
    })
  }
  

  addMitigation() {
    let control = <FormArray>this.updateForm.controls.mitigations;
    control.push(
      this.formBuilder.group({
        mitigation_description: ['', Validators.compose([Validators.required,  Validators.minLength(10)])],
        mitigation_option: ['', Validators.required]
      })
    )
  }

  removeMitigation(index) {
    let control = <FormArray>this.updateForm.controls.mitigations;
    control.removeAt(index)
  }

  ngOnInit() { 
    let control = <FormArray>this.updateForm.controls.mitigations;
    control.push(
      this.formBuilder.group({
        mitigation_description: ['', Validators.compose([Validators.required,  Validators.minLength(10)])],
        mitigation_option: ['', Validators.required]
      })
    )
  }

  onUpdate(): any {
    this.crudService.updateRisk(this.getId, this.updateForm.value)
    .subscribe(() => {
        console.log('Data updated successfully!')
        this.ngZone.run(() => this.router.navigateByUrl('/risk/details'))
      }, (err) => {
        console.log(err);
    });
  }

}

edit.component.html

<div class="card-body widget-body">
            <form [formGroup]="updateForm" (ngSubmit)="onUpdate()">
              <div formArrayName="mitigations">
                <div *ngFor="let mitigation of updateForm.get('mitigations')['controls']; let i=index">
                  <div [formGroupName]="i">
                    <div class="form-group"> 
                      <label for="textarea">Mitigation {{i+1}} Description</label>
                      <textarea class="form-control form-control-sm checking-field" formControlName="mitigation_description" required></textarea>    
                      <span class="help-block" *ngIf="mitigation.get('mitigation_description').touched">
                        <span class="text-danger" *ngIf="mitigation.get('mitigation_description').hasError('required')">Description is required</span>
                        <span class="text-danger" *ngIf="mitigation.get('mitigation_description').hasError('minlength')">Minimum of 10 characters</span>
                      </span> 
                    </div>
                    <div class="form-group">
                      <label for="select">Mitigation {{i+1}} Option</label>
                      <select class="form-control form-control-sm checking-field" formControlName="mitigation_option">
                        <option>Accept</option>
                        <option>Transfer</option>
                        <option>Reduce</option>
                        <option>Avoid</option>
                      </select>
                      <span class="help-block text-danger" *ngIf="mitigation.get('mitigation_option').touched && mitigation.get('mitigation_option').hasError('required')">Option is required</span>                     
                    </div>
                  </div>
                  <div class="form-group">
                    <button type="button" class="btn-sm btn-main" (click)="addMitigation()">Add Mitigation</button>
                    <button [hidden]="i == 0" type="button" class="btn-sm btn-danger pull-right" (click)="removeMitigation(i)">Remove Mitigation {{i+1}}</button>
                  </div>
                </div>
              </div>
            </form>
</div>

Answer 1

我在开发人员的帮助下完成了它。这是工作构造函数的样子：

constructor(
    public formBuilder: FormBuilder,
    private router: Router,
    private ngZone: NgZone,
    private activatedRoute: ActivatedRoute,
    private crudService: CrudService
  ) {
    this.getId = this.activatedRoute.snapshot.paramMap.get('id');

    this.crudService.GetRisk(this.getId).subscribe(res => {
    const mitigations = this.updateForm.get('mitigations') as FormArray;
    while (mitigations.length) {
    mitigations.removeAt(0);
    }

    this.updateForm.patchValue(res);

    res.mitigations.forEach(mitigation =>       
    mitigations.push(this.formBuilder.group(mitigation)));
      this.updateForm.setValue({ 
        ...
        mitigations: res['mitigations']
      });
    });

    this.updateForm = this.formBuilder.group({
      ...
      mitigations: this.formBuilder.array([])
    })
  }

在 Angular 更新 CRUD 表单上显示数组中的多个对象

Display more than one object from array on Angular Update CRUD Form

arrays

crud

angular

angular-reactive-forms