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

我剛剛刪除了所需的本機 html 表單驗證，它工作得很好。

工作演示