3

我们希望在验证之前向用户提供需要哪个字段的视觉反馈，例如通过突出显示蓝色字段。

我们正在使用响应式表单来验证用户的输入：

export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      name: ['', Validators.required ],
      city: ''
    });
  }
}

与模板

<form [formGroup]="myForm">
  <div class="form-group">
    <label>Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
  <div class="form-group">
    <label>City:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

稍后将根据模型生成整个模板。因此，我们希望尽可能保持模板“纯”。

但是：为了通过 CSS 突出显示必填字段，我需要输入元素上的类或属性（required ）。如果 Angular 可以为 -Element 设置一个（或两者），那就太好了input，当相应FormControl的 Validator 被赋予required.

在上面的例子中，我必须手动required添加一个类或属性到-Element 以使这个 CSS 工作：required input

.form-control[required], .form-control.required {
  border-color: blue;
}

当验证器设置为相应的时，有没有办法自动将类或属性附加到 DOM-Element FormControl？

4

1 回答 1

3

所以 Angular 没有任何称为 getValidators 的东西。这里有一个未解决的问题https://github.com/angular/angular/issues/13461

但是，您可以执行以下操作来获取所有带有所需验证器的 formControl。（不是我的代码：有人在公开问题上提到）

getValidators(_f) {
  return Object.keys(_f).reduce((a, b) => {
    const v = _f[b][1];
    if (v && (v === Validators.required || v.indexOf(Validators.required) > -1)) {
      if (!a[b]) { a[b] = {}; }
      a[b]['required'] = true;
    }
    return a;
  }, {});
}

const _f = {
  id: [],
  name: [null, Validators.required],
  phone: [],
  email: [null, [Validators.required, Validators.email]]
};
this.frmMain = this._fb.group(_f);
console.log(this.getValidators(_f));    // {name: {"required": true}, email: {"required": true}}

一旦你有了所需验证器的所有控件的列表，你就可以遍历它们并相应地应用样式。

我希望唯一的问题是使用所需的验证器进行控制？如果是，这应该可以解决问题。

于 2018-03-23T10:52:51.750 回答