验证了 ReactiveForms 模型之外的输入

Question

我正在使用具有 3 个输入的 Angular 响应式表单，每个输入都有自己的验证。我有一个不属于表单的输入 - 它是一个位于它自己的组件内部的输入，它有自己的反应形式。

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

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

一个选项 可能是有一个 ngOnChanges 监听输入变化是否有效，并将 true/false 布尔值分配给 this.disabled 并将其传递给组件。 - 但是，我相信这里有更简单的方法。

HTML

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

StackBlitz example

Answer 1

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

您可以利用 getter 和 setter 来解决它 (Stackblitz):

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

当为属性设置初始值时，

this.control 将为空。它发生在 ngOnInit.

之前

或如您所述ngOnChanges

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

验证了 ReactiveForms 模型之外的输入

Validated an input that's outside of the ReactiveForms model

javascript

forms

angular

angular-reactive-forms