仅在可见输入时激活角度验证器

问题描述

我正在尝试使其工作，但我不知道如何，我有几个输入仅在用户需要它们时才显示，但是如果它们被激活，则必须填充它们。所以我得到了

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且未显示输入时，由于该字段为空，因此该按钮仍处于禁用状态

我希望当输入不显示时，不执行其验证程序，以便启用按钮

有人可以帮助我实现这一目标吗？

解决方法

您需要做的是禁用控件，而不是删除/隐藏表单字段，或者除此以外。这是通过在控件上调用disable()来完成的。我们将其与相关的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属性来与表格状态分开维护。

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

,

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

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

然后在创建FormControl时将此功能作为验证器。

最后，您必须为具有inputActive值的表单控件以及当其valueChanges调用内置的updateValueAndValidity函数时设置一个侦听器。

查看更多here

,

您正在等待指令的行为类似于组件。 input是未在DOM中设置的指令。就是这样但是，当您加载component时，您将加载所有逻辑。
因此，我建议您将input放在类似app-input的组件中，而不要设置所需的Tha验证器，只要显示此组件，验证器就会自动激活。>