Javascript Can'；t在添加值后验证Angular form builder表单组中的必填字段

这是我的

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

问题-有人能帮我理解为什么吗？我需要使用某种形式的阵列类型吗

这是我的密码

registerForm:FormGroup；
构造函数（私有formBuilder:formBuilder）{}
恩戈尼尼特（）{
this.registerForm=this.formBuilder.group({
practicedStyles:[[]，[Validators.required]]
});
}
获得实践的风格（）{
返回this.registerForm.get（'practicedStyles'）；
}
添加（）{
这个。实践风格。价值。推动（1）；
}

角8反应形式验证
有效：{{practicedStyles.valid}

是必需的：{{practicedStyles.errors？.required}

添加

您是否尝试使用

FormGroup.setValue

add（）{
this.registerForm.get（'practicedStyles'）.value.push（1）；
this.registerForm.setValue（{practicedStyles:this.registerForm.get（'practicedStyles'）.value}）；
}

我认为将值直接推送到数组不会触发更改，因为您没有更改对象的引用。如果尝试将FormGroup控件重新分配给新对象：

this.practicedStyles.value=1

您将收到以下错误消息

无法分配给“value”，因为它是只读属性

操作FormGroup控件时，应使用FormGroup提供的方法：

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