更新时间:2023-10-29 13:13:58
与此同时,我找到了解决方案.我的子组件现在引用了相应的FormGroup.
Meanwhile I found a solution. My child component now references the according FormGroup.
<email [(emailAddress)]="model.email"
[formGroup]="form.form"
[required]="emailRequired()">
</email>
通过FormGroup,您可以到达子组件实际的FormControl并在验证器标志的设置器内调用 updateValueAndValidity (在我的情况下为 set required ):
Via the FormGroup, you can then reach to the child components actual FormControl and call updateValueAndValidity inside the setter of the validator flag (set required in my case):
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {FormGroup} from '@angular/forms';
@Component({
selector: 'email',
templateUrl: './email.component.html',
styleUrls: ['./email.component.css']
})
export class EmailInputComponent {
private _emailAddress: string;
public _required = true;
@Input()
private formGroup: FormGroup;
@Output()
emailAddressChange = new EventEmitter();
constructor() { }
@Input()
get emailAddress(): string {
return this._emailAddress;
}
set emailAddress(value: string) {
this._emailAddress = value;
this.emailAddressChange.emit(this._emailAddress);
}
@Input()
get required(): boolean {
return this._required;
}
set required(value: boolean) {
this._required = value;
// this is where the magic happens
const refEmailControl = this.formGroup.controls.email;
if (refEmailControl) {
refEmailControl.updateValueAndValidity(); // updates the validity state
refEmailControl.markAsTouched(); // necessary in my case to make UI render error message
}
}
}