Question

当表单元素具有无效值但我无法访问它并且我不知道该怎么做时，我试图添加一个错误类。

code.component.ts

this.dateRangeForm = this.fb.group({
      from: this.fb.group({
        fromYear: new FormControl(null, [ValidYearsValidator]),
        fromMonth: new FormControl(null, []),
        fromDay: new FormControl(null, [])
      }),
      to: this.fb.group({
        toYear: new FormControl(null, []),
        toMonth: new FormControl(null, []),
        toDay: new FormControl(null, [])
      })
    });

code.component.html

<form [formGroup]="dateRangeForm">
    <span formGroupName="from">
      <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
        size="4" [class.error]="!fromYear.valid">

我的问题是在下面的代码的最后输入中。我正在尝试访问fromYear.valid属性，但在加载表单后出现此错误：

错误TypeError：无法读取未定义的属性“有效”

Answer 1

您可以使用dateGroupForm.controls.from.controls.fromYear访问控件。

然后可以使用dateGroupForm.controls.from.controls.fromYear.value访问该控件的属性（值，状态等）。

Answer 2

如果要在嵌套表单组中获取表单控件的状态，这是访问它的方法：

  <input type="text" [ngxOnlyNumbers]="true" maxlength="4" class="date-form-input" formControlName="fromYear"
    size="4" [class.error]="!dateRangeForm.controls.from.controls.fromYear.valid">

dateRangeForm.controls.from.controls.fromYear.valid

Answer 3

您需要在组件中提供一种get方法才能访问fromYear属性。

示例：

get fromYear(){
 return this.dateRangeForm.get('from.fromYear');
}

如何从角反应性模板的模板访问子组的有效属性

3 个答案: