仅当输入可见时才激活 angular 个验证器

Question

我正在尝试让它工作，但我不知道如何，我有几个输入仅在用户需要时显示 them.But 如果它们被激活，则必须填写他们。所以我得到了这个

component.ts

    dataForm = new FormControl({
       myInput: new FormControl(null, Validators.required)
    })

component.html

<form [formGroup]="dataForm">
     <input formControlName="myInput" type="number" *ngIf="inputActive">

   <button type="submit" [disabled]="!dataForm.valid">
</form>

我遇到的问题是，当 inputActive 变量为 false 并且未显示输入时，按钮仍然被禁用，因为该字段为空

而且我希望当未显示输入时，不执行其验证器以便启用按钮

谁能帮我实现这个目标？

Answer 1

我最近不得不自己处理这个问题。我最终创建了一个像这样的自定义验证器函数

conditionalRequiredValidator(formControl: AbstractControl) {
    if (!formControl.parent) {
      return null;
    }
    if (inputActive) {
      return Validators.required(formControl);
    }
    return null;
  }

然后在创建 FormControl 时将此函数作为验证器引用。

最后，您必须为具有 inputActive 值的表单控件设置一个侦听器，并且当其 valueChanges 调用表单 built-in updateValueAndValidity 函数时.

查看更多here

Answer 2

您需要做的是禁用该控件，而不是 removing/hiding 表单域或除此之外。这是通过调用 disable() on the control. We will use this together with the related disabled 属性来实现预期效果的。

@Component({
  // ...boilerplate 
})
export class MyComponent {
  constructor(readonly formBuilder: FormBuilder) {}

  dataForm = this.formBuilder.group({
    anotherInput: this.formBuilder.control(''), // see note
    myInput: this.formBuilder.control(null, Validators.required)
  });

  disableControl(control: AbstractControl) {
    control.disable();
  }
}

在模板中

<form [formGroup]="dataForm">
  <input formControlName="myInput" type="number" 
    [hidden]="dataForm.controls.myInput.disabled">

  <input formControlName="anotherInput">

  <button type="submit" [disabled]="!dataForm.valid">Submit</button>
</form>

<button (click)="disableControl(dataForm.controls.myInput)" type="button"></button>

stackblitz

这也有助于组织表单，因为我们没有 inputActive 属性来与表单状态分开维护。

请注意，如果所有个子项都被禁用，则整个表单组将被视为已禁用。

Answer 3

您正在等待一个指令表现得像一个组件。 input 未在 DOM 中设置时是指令。就是这样。但是，当您加载 component 时，您会加载所有逻辑。
所以我建议你把你的 input 放在类似 app-input 的组件中，而不是你设置你想要的验证器，只要你显示这个组件，验证器就会自动激活。

仅当输入可见时才激活 angular 个验证器

Activate angular validators only if input is visible

forms

angular

angular-validator