>source

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


  • 답변 # 1

    !!를 추가하여 부울인지 확인하십시오 :

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

    나는 당신의 코드를 가져 갔고 이것은 작동합니다. 하나만 추가했습니다! 테스트 https://stackblitz.com/edit/angular-fquu8t

  • 답변 # 2

    [class] 여야한다고 생각합니다

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

    따라서이를 처리하기 위해 컴포넌트에 로직을 작성해야합니다. 와 같은 것

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

관련 자료

  • 이전 node.js - 포트 3000에서 쿠키를 가져 오려고 할 때 쿠키와 서명 된 쿠키가 왜 비어 있습니까?
  • 다음 html - ngFor 내의 요소에서 서비스로 값 전달