angular 如何访问 ngClass 的表单组属性

Question

我正在使用如下的 formGroup：

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

我现在使用的打字稿

this.firstFormGroup.get('purchaser')

我需要使用 ngClass 切换样式 class，但我不确定如何在 HTML 中访问此属性。通常我使用下面的直接 class 属性的形式。

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

我可以使用像 getPurchaser() 这样的 class 函数来获取价值，但是有没有像

这样更短的方法

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

Answer 1

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

在component.ts

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

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

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

另一种方法是直接使用

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

angular how to access formgroup property for ngClass