typescript Angular 14:嵌套的FormGroup未重置验证器

9rnv2umw  于 2023-02-20  发布在  TypeScript
关注(0)|答案(1)|浏览(183)

我正在尝试实现一个嵌套的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标记为红色。

jjhzyzn0

jjhzyzn01#

根据文档,如果nonNullable设置为true,则控件的值将重置为初始值(如果有)。nonNullable并不意味着调用reset()后该值永远不会为null、falsy或无效。
在Validator.required()文档中,您了解到空字段值将触发invalid状态。以下是零长度字符串的示例:

const control = new FormControl('', Validators.required);
console.log(control.errors); // {required: true}

相关问题