Angular 如何从表单元素的模板访问子组的有效属性

当一个表单元素有一个无效的值，但我不能访问它，并且我不知道如何去做时，我试图添加一个错误类

代码.组件.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属性，但在加载表单后出现以下错误：

---

错误类型错误：无法读取未定义的属性“valid”

您可以使用

dateGroupForm.controls.from.controls.fromYear

访问控件

---

然后，您可以使用

dateGroupForm.controls.from.controls.fromYear.value

访问该控件的属性（值、状态等）

如果要获取嵌套表单组中表单控件的状态，可以通过以下方式访问它：

  <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

您需要在组件中提供一个

get

方法来访问

fromYear

属性

例如：

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

---

fromyear

的值是多少？一个数字，我在api调用后设置该值，如果有，则设置该值，如果没有，则以空值开头

[class.error]='中的“formYear”！fromyear.valid

，是组件的属性，不是

formControlName

或控件的值，请验证组件中是否有名为

fromyear

的变量。是。。。这是我最后一次尝试，我无法访问dateRangeForm.from.fromYear.validOk，解决了它。。。我不得不用：谢谢！我通过直接访问表单解决了这个问题，我想我是在一大早的时候编码的，呵呵