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

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

<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

如果您已经应用了某些类，并且想要向该元素添加更多类...

如，

包含原始类'originalClass'的HTML元素以及在组件中定义的更多类：

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

在您的组件类中：

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

这将最终使用3个类渲染元素 - 1个原始类和2个来自组件类。

原始回答：

检查此stackblitz - 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;
}

ngClass angular，字段逻辑为param

2 个答案: