Angular中FormArray初始化值后Validators.required验证失效

问题原因 #

你遇到的问题核心在于：addNewFormGroup方法中使用myObject.issueDate和myObject.comment作为控件初始值时，这些值的类型或内容不符合Angular表单Validators.required的验证逻辑预期：

• 若myObject的属性值是null或undefined，Angular会将控件内部值设为null，当用户清空输入框时，输入框通常会把值设为空字符串''，部分场景下（比如日期类型输入框）因类型不匹配，导致验证器未正确识别空值状态。
• 若myObject的属性值是空格字符串' '，Validators.required不会将其判定为空值，清空输入框后若仍保留空格，验证也不会生效。

而当你移除初始值直接用''时，控件值始终是字符串类型，清空后的''会被required验证正确识别为必填错误。

解决方案 #

方案1：显式将初始值转为空字符串 #

使用空值合并运算符??或逻辑或||，确保初始值为空时统一设为''：

addNewFormGroup(): UntypedFormGroup {
    return this.formBuilder.group({
          issueDate: [myObject.issueDate ?? '', Validators.required],
          comment: [myObject.comment ?? '', Validators.required]
    });
}

方案2：处理空格字符串 #

如果myObject的属性可能包含空格，先做trim处理：

addNewFormGroup(): UntypedFormGroup {
    const issueDate = (myObject.issueDate || '').trim() || '';
    const comment = (myObject.comment || '').trim() || '';
    return this.formBuilder.group({
          issueDate: [issueDate, Validators.required],
          comment: [comment, Validators.required]
    });
}

方案3：适配日期输入框类型 #

如果issueDate绑定的是type="date"的输入框，确保初始值是符合格式的字符串或null，清空后值为null时也能触发验证：

addNewFormGroup(): UntypedFormGroup {
    // 若myObject.issueDate是Date对象，转为YYYY-MM-DD格式字符串
    const issueDate = myObject.issueDate 
        ? myObject.issueDate.toISOString().split('T')[0] 
        : null;
    return this.formBuilder.group({
          issueDate: [issueDate, Validators.required],
          comment: [myObject.comment ?? '', Validators.required]
    });
}

内容的提问来源于stack exchange，提问作者James