javascript - Angular Reactive Forms动态嵌套数组检测失去焦点时的变化

Question

实际上我想在 lostfocus/blur 上检测输入和下拉字段的变化。

构造函数代码:

constructor(private schemaCreationService: SchemaCreationService, private formBuilder: FormBuilder) {
    this.schemaForm = this.formBuilder.group({
      definition :  this.formBuilder.group({
        fieldName: ['', {
          validators: [Validators.required], updateOn: 'blur'}],
        type: ['', Validators.required]
      }, { updateOn: 'blur' })
    });
    this.definition = this.formBuilder.array([]);
  }

我正在尝试找出更改，但它不起作用

这里是检测变化的代码

ngOnInit() {
    this.schemaForm.addControl('rows', this.definition);
    this.definition.push(this.createItemFormGroup());
     this.onChanges();
  }

get definitionArray() {
  return this.schemaForm.get('rows') as FormArray;
}

//在这里，我以两种方式订阅更改，一种被评论，但两种方式都不起作用。请帮助我实现这一目标。如果需要更多详细信息，请告诉我。onChanges(): void {

this.definitionArray.valueChanges.subscribe(values => {
    console.log(values);
  }); 

 /* const control = this.schemaForm.controls.rows as FormArray;
  for (let i = 0; i < control.length; i++) {
          control.controls[i].get('fieldName').valueChanges.subscribe(x => {
            console.log(x);
          });
    } */
 }

HTML:

  <tr *ngFor="let row of schemaForm.get('rows')?.controls;let index = index;">
                <td>
                <input  type="text"  class="form-control" [formControl]="row.get('fieldName')"/>
                <!--  <div *ngIf="submitted && fieldName.errors" class="invalid-feedback">
                      <div *ngIf="fieldName.errors.required">Column Name is required</div>
                  </div>-->
                </td>
                <td>
                  <!-- <input [formControl]="row.get('fieldtype')">-->
                  <select [formControl]="row.get('type')" class="form-control"  name="type" (change)='onDataTypeChange($event.target.value, index)' required>                      
                          <option value="lookup">Lookup</option>
                          <option value="number">Number</option>
                          <option value="string">Text</option>
                          <option value="formula">Formula</option>
                  </select>
                </td>              
                <td>                    
                    <span (click)="onAddRow(index)"> <i class="fa fa-plus-circle icon-plus-color"></i></span>
                    <span (click)="onRemoveRow(index)"><i class="fa fa-minus-circle icon-minus-color"></i></span>
                    <!-- <th scope="col"><button (click)="onAddRow()">Add Columns</button></th>-->
                </td>

Answer 1

我刚刚删除了所需的 native html 表单验证，它工作得很好。

Working Demo