以字段逻辑作为参数的ngClass angular

我想在字段更改上创建动态类，而不是在提交的表单上创建动态类 这个问题我不知道该怎么办：D请帮帮我

这是我的html组件

 <div [ngClass]="formGroup">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name" required (ngModel)]="model.name" name="name" #name="ngModel">

</div>

---

更新2

如果您希望能够使用您的逻辑添加多个类，可以使用如下所示的[ngClass]

<button class='originalClass' [ngClass]='getSomeMoreClasses()'>Button</button>

更新1

如果已经应用了一些类，并且希望向元素添加更多类

例如：

具有原始类“originalClass”和组件中定义的更多类的HTML元素：

<button class='originalClass' [class]='someMoreClasses'>My Button</button>

这将最终使用3个类呈现元素-1个原始类和2个组件类

原始答案：

看看这场闪电战-

html:

css:

我得到了答案 实际上，我不需要从我的.ts中获取ngClass值 我可以通过内联直接设置该值

<div [ngClass]="{'form-group': true, 'has-error': name.invalid}">

---

谢谢，祝您愉快

您能添加更多关于需要添加哪个类的条件的详细信息吗？如果使用class指令，基于此条件的条件将忽略（不渲染）html atribute类。我需要向元素添加多个类，其中一个类基于有效或无效的输入。当用户从字段中失去焦点时，是否要显示“input is required”之类的错误？关于字段更改创建动态类是什么意思？名称如果要添加类的字段无效，则在表单组中出现错误。顺便问一下，您使用的是引导3还是引导4？我在stackblitz中使用了bootstrap 4。我还不明白。。。在我提交表格之前。。。如何捕捉字段有效或无效（onchange）？所以我可以将它添加到我的var moreclass={iserror=name.valid}

<button class='originalClass' [class]='someMoreClasses'>My Button</button>

export class YourAppComponent {
    someMoreClasses: string = 'additionalClass1 additionalClass2';
}

<h1 [class.coolClass]="boolVar">H1 element</h1>
<button (click)="toggleClass()">Toggle Class</button>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  boolVar: boolean = false;

  toggleClass(): void {
    this.boolVar = !this.boolVar;
  }

}

.coolClass{
  color: red;
  font-weight: bold;
}

<div [ngClass]="{'form-group': true, 'has-error': name.invalid}">