验证了反应式窗体模型之外的输入

Question

StackBlitz示例

我使用的是一个Angular Reactive表单，它有3个输入，每个输入都有自己的验证。我有一个输入不是表单的一部分，它位于自己的组件中，在那里它有自己的反应表单

我试图传递[disabled]="registerForm.invalid"的一个属性，该属性来自该视图上的3个输入的组成。例如如果它们都是有效的"；则发送值false"；，如果一个是无效的"；则发送值true"；。这将使单个输入被禁用/启用。[disabled]="true or false"有效，所以我知道问题在于阅读表格的有效性。

我认为registerForm.invalid会在反应形式的每个输入更改上发送一个更新的true/false值，因此会发送我需要的值。

一个选项可以是有一个ngOnChanges来侦听输入更改，无论这些更改是否有效，并将true/false bool分配给this.disabled并将其传递给组件。-然而，我相信这里有一个更简单的方法。

HTML

<app-input label="Search" [value]="" [disabled]="registerForm.invalid ? true : false"></app-input>

StackBlitz示例

Answer 1

问题是AppInputComponent中的表单控件是在ngOnInit上创建的。当<app-input将接收到新值时，ngOnInit将不会被触发。

你可以利用getter和setter来解决它(Stacklitz(：

@Input('disabled') get disabled() {
return this.control.disabled;
} 
set disabled(value) {
if (value) {
this.control?.disable();
} else {
this.control?.enable();
}
} 

当为属性设置初始值时，this.control将为null。它发生在ngOnInit之前。

或者你提到的ngOnChanges

ngOnChanges(changes: SimpleChanges) {
if (changes.disabled) {
if (changes.disabled.currentValue) {
this.control.disable();
} else {
this.control.enable();
}
}
}