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

Question

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

组件.ts

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

组件.html

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

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

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

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

谁能帮我实现这个目标？

Answer 1

您需要做的是禁用控件，而不是删除/隐藏表单域，或者除此之外还删除/隐藏表单域。这是通过调用 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 属性来与表单状态分开维护。

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