Question

我正在使用Angular 5应用程序 - 我的表单用于编辑从数据库中查询的单元，然后保存它。我的数据库查询返回正确的数据，但表单显示formarray的错误数据。

单位 - 导出接口IUnit { 身份证号码， name：string， desc：string， includeCode：Array }

这是我的ts文件： -

@Component({
  selector: 'app-edit-a-unit',
  templateUrl: './edit-a-unit.component.html',
  styleUrls: ['./edit-a-unit.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})

export class EditAUnitComponent implements OnInit {
  includeAcct: FormControl = new FormControl();
  autocompleteOptions$: Observable<Array<string>>;
  form: FormGroup;
  includeCode: FormArray;

  constructor(private route: ActivatedRoute,
              private unitService: UnitService,
              private swal: SweetAlertService,
              private router: Router,
              private dialog: MatDialog,
              private snackbar: MatSnackBar,
              private departmentService: DepartmentService,
              private http: HttpClient,
              private changeDetector: ChangeDetectorRef,
              private fb: FormBuilder) {
  }

  ngOnInit() {
    this.id = 3; //get id from URL param
    this.createForm();
    this.unitService.getUnitDetail(this.id).subscribe((unit: IUnit) => {
    this.unit = unit;
    for (let i=0; i<this.unit.includeCode.length; i++) {
      console.log('includeCode: ' + this.unit.includeCode[i].code);
    } //['DEPT1', 'DEPT2', 'DEPT3']
    this.loadUnit();
 });


}

createForm() {
  this.form = this.fb.group({
      name: '', //this.unit.name,
      desc: '', //this.unit.desc,
      includeCode: this.fb.array([this.createItem()])
  });
 }

createItem() {
  return this.fb.group({
    includeAcct: this.includeAcct
  });
}

loadUnit() {
  this.form.patchValue({
          name: this.unit.name,
          desc: this.unit.desc,
});

this.includeCode = this.form.get('includeCode') as FormArray;
for (let i=0; i<this.unit.includeCode.length; i++) {
  this.includeCode.removeAt(i);
  this.includeCode.setControl(i, this.createItem());                  (<FormArray>this.form.controls['includeCode']).at(i).setValue({includeAcct: this.unit.includeCode[i].code});
 }    
}

这是我的html文件： -

<form [formGroup]="form" (ngSubmit)="onSubmit()">    
  <div class="row">

    <div class="small-12 medium-4 large-6 columns">
      <mat-form-field>    
        <input matInput name="name" formControlName="name" required/>            
      </mat-form-field>
    </div>
    <div class="small-12 medium-4 large-6 columns">
      <mat-form-field>
        <input matInput name="desc" formControlName="desc"/>
      </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="small-12 medium-12 large-6 columns">
      <mat-card>
        <div class="row">Include Depts</div>
        <div formArrayName="includeCode" *ngFor="let inc of form.get('includeCode').controls; let i = index;">
          <div [formGroupName]="i">    
            <mat-form-field>
              <input aria-label="Include Org/Dept" matInput formControlName="includeAcct">                  

            </mat-form-field>    

          </div>
        </div>

      </mat-card>    
    </div>    

</form>

我的表单显示3行＆＃34; Include Depts＆＃34; - 但它们都显示相同的值 - DEPT3。

我做错了什么？

谢谢！

FormArray显示不正确的数据

0 个答案: