添加值后无法验证 Angular 表单生成器表单组中的必填字段

Question

当我单击我的按钮（在 Stackblitz link 中）并将一个值推送到数组时，我希望该字段有效，但它仍然无效。如果我在一个值中硬编码，它显示为有效，但如果我从点击事件中推送一个值则不是。

问题 - 谁能帮我理解为什么？我需要使用某种 formArray 类型吗？

这是我的代码。

registerForm: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.registerForm = this.formBuilder.group({
    practicedStyles: [[], [Validators.required]]
  });
}

get practicedStyles() {
  return this.registerForm.get('practicedStyles');
}

add() {
  this.practicedStyles.value.push(1);
}

<div class="card m-3">
  <h5 class="card-header">Angular 8 Reactive Form Validation</h5>
  <div class="card-body">
    <form [formGroup]="registerForm">
      <p>Is valid: {{practicedStyles.valid}}</p>
      <p>Is required: {{practicedStyles.errors?.required}}</p>
      <button class="btn btn-primary" (click)="add()">Add</button>
    </form>
  </div>
</div>

Answer 1

您尝试使用 FormGroup.setValue 了吗？

    add() {
      this.registerForm.get('practicedStyles').value.push(1);
      this.registerForm.setValue({practicedStyles: this.registerForm.get('practicedStyles').value});
    }

我认为将值直接推送到数组不会触发更改，因为您没有更改对象的引用。如果您尝试将 FormGroup 控件重新分配给新对象： this.practicedStyles.value = 1 您将收到以下错误消息 Cannot assign to 'value' because it is a read-only property.

在操作 FormGroup 控件时，您应该使用 FormGroup 提供的方法来执行此操作：

因此，即使您没有更改对象的引用，您也是在通知框架该对象确实发生了更改。

添加值后无法验证 Angular 表单生成器表单组中的必填字段

Can't validate a required field in Angular form builder form group after adding a value

javascript

angular

typescript

formgroups

angular-formbuilder