我正在尝试实现一个嵌套的FormGroup
。到目前为止,我在尝试重置表单时遇到了错误。表单结构如下所示:
form: UntypedFormGroup;
this.form = this.fb.nonNullable.group({
f1: [''], f2: this.fb.nonNullable.array([], Validators.required),
f3: this.fb.nonNullable.array([]), f4: this.fb.nonNullable.array([]),
f5: this.fb.nonNullable.group({ id: ['', Validators.required] })
});
我注意到,在重置整个表单时,id
字段所需的验证程序没有被重置。
我有一个类似的项目建立在Angular 14上,但没有任何嵌套的表单组,但根据我的经验和研究,我写了this.form.reset()
,它用初始值重置表单,但保持id
字段的有效状态为false
。
如何解决这个问题?另外,数组字段被初始化为NULL,尽管我已经将formgroup & formarray设置为不允许NULL。
当前逻辑:
this.form.reset();
console.log("Form after reset:", this.form.value);
console.log("Id field valid? ", this.form.get('f5').valid);
电流输出:
Output 1: Form after reset: {"f1":"","f2":[null],"f3":[],"f4":[],"f5":{"id":""}}
Output 2: Id field valid? false
注意:这里我只设置了f2字段的值,所以它现在只有NULL。
预期输出:
Output 1: Form after reset: {"f1":"","f2":[],"f3":[],"f4":[],"f5":{"id":""}}
对于第二个输出,表单应该重置为其初始状态,因为它将与id
字段关联的mat-form-field
标记为红色。
1条答案
按热度按时间jjhzyzn01#
根据文档,如果
nonNullable
设置为true,则控件的值将重置为初始值(如果有)。nonNullable并不意味着调用reset()后该值永远不会为null、falsy或无效。在Validator.required()文档中,您了解到空字段值将触发
invalid
状态。以下是零长度字符串的示例: