Question

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

我们正在使用 Reactive Forms 来验证用户的输入：

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>

稍后将从模型生成整个模板。因此，我们希望将模板保持为＆＃34; pure＆＃34;尽可能。

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

在上面的示例中，我必须手动添加一个类required或属性required 到input - 元素来制作这个CSS工作：

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

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

Answer 1

因此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}}

获得具有所需验证器的所有控件的列表后，您可以循环遍历它们并相应地应用样式。

我希望唯一的问题是获得所需验证器的控件？如果是，这应解决问题。

在Angular 5中使用Reactive Forms时，在验证之前标记需要formControls

1 个答案: