ngClass угловой с полевой логикой в ​​качестве параметра

Question

Я хочу создать динамический класс при изменении поля, а не в форме, представившей проблему. Я понятия не имею, чтобы сделать это: 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>

это мой тс

formGroup = {
    'form-group': true,
    'has-error': heroForm.name.invalid
  }

Answer 1

я получил ответ, на самом деле мне не нужно получать значение ngClass из моего .ts. Я могу напрямую установить значение, вставив его

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

спасибо, хорошего дня

Answer 2

Обновление 2

Если вы хотите добавить более одного класса, используя свою логику, вы можете использовать [ngClass], как показано ниже ..

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

А в вашем компоненте ...

export class YourAppComponent {
    applyClass1: boolean = true;
    applyClass2: boolean = true;
    applyClass3: boolean = true;

    getSomeMoreClasses() {
        let classes = {
            class1: this.applyClass1,
            class2: this.applyClass2,
            class3: this.applyClass3
        };

        return classes;
    }
}

Обновление 1

Если у вас уже есть несколько примененных классов, и вы хотите добавить больше классов к элементу...

Например,

HTML-элемент с исходным классом 'originalClass' и другими классами, определенными в компоненте:

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

И в классе вашего компонента:

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

Это приведет к тому, что ваш элемент будет отображен с 3 классами - 1 оригинал и 2 из класса компонента.

Оригинальный ответ:

Проверьте этот стек- https://stackblitz.com/edit/angular-ozcecx

html:

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

ts:

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;
  }

}

css:

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