Question

我想知道如何将以下表单中的Validator设置为Required，只有表单元素存在时才会出现：

<div *ngIf="form.controls.user.value !== 'Admin' && form.controls.user.value ">
        <label>Role:</label>
        <input type="text" ngControl="role">
</div>

我的表格是：

       this.form = this._formBuilder.group({
        user: ['',Validators.required],
        role: ['', Validators.required]
    });

Answer 1

在您的情况下，您将创建一个全局验证器。像这样：

this.form = this._formBuilder.group({
  user: ['', Validators.required],
  role: ['']
}, { validator: (group) => {
  if (group.controls.user.value !== 'Admin') {
    return Validators.required((group.controls.role);
  }
  return null;
}});

在这种情况下，表单在以下情况下有效（this.form.valid === true）：

用户不为空，与Admin不同且角色不为空
用户为Admin

请参阅此plunkr：https://plnkr.co/edit/UKyRiq?p=preview。

有关详细信息，请参阅此问题：

Cross field validation in Angular2

Answer 2

您可以使用disable()和enable()功能。禁用表单控件时，不会对该控件应用验证。

this.form.controls.user.disable();
this.form.controls.role.disable();

Answer 3

在模板中可以通过这种方式完成-

<input [(ngModel)]="page.headerImageWidth" [required]="page.isHeaderAvailable">

Answer 4

您应该这样做。

在html中的* ngIf属性中添加isVisible变量

  <div *ngIf="isVisible && form.controls.user.value !== 'Admin' && form.controls.user.value ">
      <label>Role:</label>
      <input type="text" ngControl="role">

在.ts

中

this.form = this._formBuilder.group({
      user: ['',Validators.required],
      role: ['', Validators.required]
  });



 if(this.form.controls.user.disabled == true){
  this.isVisible = false;
  }
  else {
  this.isVisible = true;
  }

如果可见，如何将Validator设置为必需？

4 个答案: