[required] 标记每次从 true 变为 false 时都会发出一个事件

Question

我有一个用这样的东西初始化的 Angular 形式

buildForm() {
this.form = this.formBuilder.group({
value1: this.formBuilder.control(null),
value2: this.formBuilder.control(false)
});
}

我在 html 的标签中使用了一个[required]，我有两个条件，第一个是需要 true/false 的对象，第二个是表单中的另一个值(可以在 ts 中或由用户更新)。

<div [formGroup]="form">
<div *ngIf="valuesObject.value1.display">
<mat-form-field>
<mat-select formControlName="value1"
[required]="valuesObject.value1.required || form.value.value2">
<mat-option [value]="null"> empty <mat-option>
<mat-option [value]="1"> option 1 <mat-option>
</mat-select> 
</mat-form-field>
</div>
</div>

每次[required]从假 ->真或真 ->假翻转时，它都会向我的form.valueChanges发送一个事件，然后向服务器发送调用，因为它认为数据已更新。有没有办法忽略此事件或捕获它，以便我可以设置一个标志以在.valueChanges中忽略它？

Answer 1

如果使用formControl，则也不需要使用 [required] 属性。尝试以某种方式更改应用逻辑，即使用formControl对象来处理所需的属性 - 这是正确的方法。

this.form.controls["value1"].setValidators([Validators.required]);

并清除它

this.form.controls["value1"].clearValidators()

在此之后，您需要更新表单，以正确进行更改：

this.form.controls['value1'].updateValueAndValidity()

看到这个问题

更新

正如您所说，上述检查非常频繁，您愿意将其保留在模板中：在这种情况下，我仍然建议使用自定义验证器，您可以在其中封装您的逻辑。

请参阅文档中的跨字段验证教程，了解反应式表单(正如您所说，您也从代码端更改了字段的值)：

const heroForm = new FormGroup({
'value1': new FormControl(),
'value2': new FormControl()
}, { validators: myRequiredValidation });
export const : myRequiredValidation = (control: FormGroup): ValidationErrors | null => {
const value1 = control.get('value1');
const 'value2' = control.get('value2');
return <your logic> ? { myRequiredValidation: true } : null;
};