Làm thế nào để phát hiện các thay đổi trong mảng điều khiển biểu mẫu trong Angular 4?

Question

Tôi đang làm việc cho dự án Angular 4. Tôi có một yêu cầu để phát hiện những thay đổi của mảng điều khiển biểu mẫu. ví dụ. Tôi có một mảng điều khiển biểu mẫu có tên là các nhà cung cấp, làm thế nào để phát hiện các thay đổi của nó?

export class CustomFormArray { 
public form: FormGroup; 

constructor(private _fb: FormBuilder) { 
     this.form = _fb.group({ 
      providers: _fb.array([]) 
     }); 
    } 
} 

Answer 1

FormArray kéo dài AbstractControl vì vậy nó có valueChanges tài sản mà phát ra chanes.

this.form = this.fb.group({ 
    providers: this.fb.array([]), 
}); 
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required)); 
(this.form.get('providers') as FormArray).push(new FormControl('', Validators.required)); 

(this.form.get('providers') as FormArray).valueChanges.subscribe(values => { 
    console.log(values); 
}); 

Trong mẫu của bạn:

<input *ngFor="let field of form.controls.providers.controls;" [formControl]="field"> 

Các values trong đăng ký sẽ trả về một mảng với giá trị của từng lĩnh vực đầu vào khi bất kỳ thay đổi (về mặt ngữ pháp hoặc từ giao diện người dùng).

Trong trường hợp nếu có FormGroup trong FormArray không có thay đổi nào. chỉ cần sử dụng mã thành phần sau.

(this.form.get('providers') as FormArray).push(this.fb.group({ 
     'name': '', 
     'age': '' 
    })); 

và mẫu sẽ là:

<div *ngFor="let field of form.controls.providers.controls;" [formGroup]="field"> 
    <input formControlName="name" placeholder="name"> 
    <input formControlName="age" placeholder="age"> 
</div> 

đây là plunker

Answer 2

Tương tự như cách bạn làm điều đó cho nhóm biểu mẫu thông thường. Bất cứ khi nào bạn khởi tạo nhóm biểu mẫu của mảng biểu mẫu của bạn, chỉ cần phát/thay đổi sự kiện thay đổi nhóm biểu mẫu của bạn trong mảng biểu mẫu của bạn.

đây là mẫu.

export class CustomFormArray { 
    public form: FormGroup; 

    constructor(private _fb: FormBuilder) { 
      this.form = _fb.group({ 
       providers: _fb.array([]) 
      }); 

     this.providers.push(this.createprovidersFormGroup()) 
     } 

    createprovidersFormGroup(){ 
      let form = this._formBuilder.group({ 
         abc: "abc" 


        }); 

       form.valueChanges.subscribe(data => { 
        console.log('Form changes', data) 
       }); 

     return form; 
     }