ValueChanges为组件中的formControls发出，但不为子组件中的formControl发出

Question

我的Angular应用程序中有一个表单，它使用了一些不同的formControls。它们中的一些在组件本身内，而一些在由第一个组件使用的第二个组件内。

我发现，如果子组件更改了表单的值(我可以通过日志记录来验证(，它不会导致可观察到的valueChanges发出。但它确实改变了形式，所以它肯定会导致可观测到的东西发出？

我的父组件中有一个formGroup，它包含不同的formControls，其中一个targetGroups直接传递给子组件，以便它可以操作它。这不会导致可观察到的valueChanges触发。但是，如果我在使用子组件后记录表单，我可以看到它正在按预期操作表单。

母组件

@Input() alertData: SafeguardAlert;
form: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.form = this.formBuilder.group({
enabled: this.formBuilder.control(this.alertData.enabled),
frequency: this.formBuilder.control(this.alertData.frequency),
targetGroups: this.formBuilder.control(this.alertData.targetGroups),
});
this.formChange();
}
get targetGroups(){
return this.form.get('targetGroups') as FormControl;
}
//TODO :: Temp, remove later
formChange(){
this.form.valueChanges.subscribe(res => {
console.log(res);
})
}

父模板

<div>
<form [formGroup]="form">
<mat-expansion-panel>
<div class="alert-body">
<div class="width-33 mt-md">
<mat-form-field>
<mat-label>
Alert Frequency
</mat-label>
<mat-select [formControlName]="'frequency'">
<mat-option [value]="'instant'">
Instant
</mat-option>
<mat-option [value]="'daily'">
Daily
</mat-option>
</mat-select>
</mat-form-field>
</div>
<app-alert-chip-list [fControl]="targetGroups"></app-alert-chip-list>
</div>
</mat-expansion-panel>
</form>
</div>

子组件

@Input() fControl: FormControl;
constructor() { }
ngOnInit() {
}
pushToFormcontrol(value: any) {
this.formControlArray.push(value);
}
get formControlArray(){
return this.fControl.value as string[];
}
spliceFromFormcontrol(index: number){
this.formControlArray.splice(index, 1);
}
clearInput(ref: HTMLInputElement){
ref.value = "";
}

子模板

<div class="card chip-list-padding p-sm">
<div class="flex-row align-items-center">
<mat-icon class="ml-sm mr-sm">person</mat-icon>
<mat-chip-list class="flex-row flex-wrap">
<div class="mr-sm" *ngFor="let element of formControlArray, let i = index">
<mat-chip [disableRipple]="true" class="chip" >
<div>
<span>{{element}}</span>
<button type="button" mat-icon-button [disableRipple]="true" (click)="spliceFromFormcontrol(i)">
<mat-icon>clear</mat-icon>
</button>
</div>
</mat-chip>
</div>
<div class="chip-list-input-cont">
<input #listInput class="chip-list-input"
(keyup.enter)="pushToFormcontrol(listInput.value); clearInput(listInput);">
</div>
</mat-chip-list>
</div>
</div>

Answer 1

您在这里遇到了一些问题：

pushToFormcontrol(value: any) {
this.formControlArray.push(value);
}
get formControlArray(){
return this.fControl.value as string[];
}

在这个地方，您直接更改了控件的值，但该值只能通过setValue或patchValue更新，这就是为什么没有valueChanges

你的代码应该看起来像

pushToFormcontrol(value: any) {
this.fControl.patchValue([...formControlArray, value]);
}
get formControlArray(){
return this.fControl.value as string[];
}
spliceFromFormcontrol(index: number){
this.formControlArray.splice(index, 1);
}

需要注意的是，如果您有数组值，最好使用formArray：

this.form = this.formBuilder.group({
enabled: this.formBuilder.control(this.alertData.enabled),
frequency: this.formBuilder.control(this.alertData.frequency),
targetGroups: this.formBuilder.array([]),
});