时间戳

首页 > 解决方案 > 角度如何访问ngClass的formgroup属性

angular - 角度如何访问ngClass的formgroup属性

问题描述

我正在使用 formGroup 如下：

  this.firstFormGroup = this._formBuilder.group({
        purchaser: ['buyer', Validators.required],
      });

在我现在使用的打字稿中

this.firstFormGroup.get('purchaser')

我需要使用 ngClass 切换样式类，但我不确定如何在 HTML 中访问此属性。通常，我将表单用于直接类属性，如下所示。

[ngClass]="purchaser === 'seller' ? 'card-selected' : ''"

我可以使用像 getPurchaser() 这样的类函数来获取价值，但是有没有更短的方法，比如

this.firstFormGroup。？？？避免编写类函数来访问值？

标签： angularformgroups

解决方案

在component.ts文件中设置getter属性即可解决问题

在组件.ts

get purchaser() {
  return this.firstFormGroup.get('purchaser').value;
}

在 html 中，您可以访问购买者

[ngClass]="purchaser === 'seller' ? 'card-selected' : ''"

另一种方法是直接使用

[ngClass]="firstFormGroup.get('purchaser').value === 'seller' ? 'card-selected' : ''"

推荐阅读