[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] 从 false -> true 或 true -> false 翻转时，它都会向我的 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()

见this question

更新

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

请参阅文档中的 Cross field validation 教程，了解响应式表单（正如您所说，您也可以从代码方面更改字段的值）：

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;
};