Question

我正在尝试向表单控件（没有任何验证器）添加错误，并期望控件呈现时处于无效状态。但是它被视为有效。我怎么了？

完整示例：https://embed.plnkr.co/aYayRFpBBTEzggL0vkXi/

const name = new FormControl('A Name');
name.setErrors({ 'something': true });
name.markAsTouched();

const street = new FormControl('A Street');

this.formData = new FormGroup({
  name,
  street
});

我的期望是，不仅“街道”无效，而且“名称”也应该无效（因为它具有“ something”错误）...

谢谢！

Answer 1

在视图中呈现后，很可能会重置Reactive表单控件的错误。

很可能一旦在视图中添加了输入框，Angular就会检查验证，然后重置您的控件错误，因为它在窗体控件中看不到任何错误（没有设置Validators）。

如果您在ngAfterViewInit()下进行更改，它将可以正常工作。（但是，是的，那之后您必须调用检测更改，否则将会收到“ expressionChangedAfterItHaHasBeenCheckedError”错误）。

constructor(private _cdr: ChangeDetectorRef) { }

ngOnInit() {
  const name = new FormControl('A Name');

  const street = new FormControl('A Street');

  this.formData = new FormGroup({
    name,
    street
  });
}

ngAfterViewInit() {
    this.formData.get('name').setErrors({'something': true})
    this._cdr.detectChanges();
}

在此处查看示例：https://plnkr.co/edit/RgEoRPF8jSp203xfwiFS?p=preview

Answer 2

猜猜我找到了一个好的解决方案： https://embed.plnkr.co/kop9jGFR6y5C4SnxXgcL/

您可以只设置“伪”验证器，而不是设置错误：

const name = new FormControl('A Name', {
  validators: () => {
    return { 'something': true };
  }
});

但是我仍然不明白为什么它在最初的方式中不起作用：（

使用setErrors使表单控件无效

2 个答案: