использовать класс на основе значения свойства

Question

[ngClass] не работает, когда я пытаюсь выбрать класс Css на основе свойства класса.

т.е.

[ngClass]="{'alert alert-danger': employeeForm.get('fullname').errors && (employeeForm.get('fullname').touched || employeeForm.get('fullname').dirty) }"

Над кодом работает в *ngIf но не в [ngClass].

Я следую учебному пособию по YouTube

export class CreateEmployeeComponent implements OnInit {
  employeeForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.employeeForm = this.fb.group({
      fullname: ['', Validators.required ],
      email: [''],

      skills : this.fb.group({
        skillName: [''],
        experience: [''],
        proficiency: ['beginner']
      })
    });
  }

  onLoadDataClick(): void {
    this.employeeForm.setValue({
      fullname: 'Jamshaid Tariq',
      email: 'jamshaid055@yahoo.com',
      skills: {
        skillName: 'C#',
        experience: 1,
        proficiency: 'beginner'
      }
    });
  }

  onSubmit(): void {
    console.log(this.employeeForm.value);
  }

}

Answer 1

попытайтесь убедиться, что это логическое значение, добавив !!:

[ngClass]="{'alert alert-danger': !!(employeeForm.get('fullname').errors && (employeeForm.get('fullname').touched || employeeForm.get('fullname').dirty)) }"

Я взял твой код, и это работает. Я только добавил один! тестировать https://stackblitz.com/edit/angular-fquu8t

Answer 2

Я думаю, это должно быть [class]

[class]="enalbleClass?'class-custom':''"

Так что вы должны написать логику в компоненте, чтобы справиться с этим.Что-то вроде

this.enalbleClass = employeeForm.get('fullname').errors && (employeeForm.get('fullname').touched || employeeForm.get('fullname').dirty)