2

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

组件.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 并且未显示输入时，该按钮仍然被禁用，因为该字段为空

我希望当输入没有显示时，它的验证器不会被执行，以便启用按钮

谁能帮我实现这一目标？

4

3 回答 3

2

您需要做的是禁用控件，而不是删除/隐藏表单域。这是通过调用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>

堆栈闪电战

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

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

于 2020-09-17T21:40:09.617 回答
1

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

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

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

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

在这里查看更多

于 2020-09-17T21:39:38.210 回答
0

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

于 2020-09-17T21:43:07.177 回答