जब मैं केवल वर्ग नाम जैसे त्रुटि और जानकारी का उपयोग करता हूं तो सीएसएस काम करता है

उदाहरण: https://stackblitz.com/edit/github-i4uqtt-zrz3jb ( कोणीय नवीनतम संस्करण का उपयोग करना)

लेकिन जब मैंने सीएसएस वर्ग का नाम बदल दिया और सीएसएस के नीचे उदाहरण के लिए और अधिक शैलियों को जोड़ा और [ngClass] अब काम नहीं करता है। कोई विचार दोस्तों? #एचटीएमएल

<div fxLayout="row" fxLayoutAlign="space-between">
  <div fxLayout="column" fxFlex="0 0 7%">
    <mat-icon 
    [ngClass]="password.hasError('mininum') ? 'error-check-outline' : 'info-check-outline'">
    check_circle_outline </mat-icon>
  </div>
  <div fxLayout="column" fxFlex="0 0 100%">
    <span 
    [ngClass]="password.hasError('mininum') ? 'text-info-error' : 'text-info'">
    8 characters mininum</span>
  </div>
</div>

#ts

validateMinimumPassword: ValidatorFn = (control: AbstractControl) => {
  if (control.value.length < 8) {
    return { minimum: true };
  }
  return null;
};

#सीएसएस

.text-info {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  color: #4caf50;
  font-family: Manrope;
  margin-top: 2.5px;
}

.text-info-error {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  color: #DDD;
  font-family: Manrope;
  margin-top: 2.5px;
}

.error-check-outline {
  transform: scale(.74);
  color: #DDD;
}

.info-check-outline {
  transform: scale(.74);
  color: #4caf50;
}
-1
user13090134 13 जुलाई 2021, 11:17

1 उत्तर

आप शर्त के आधार पर कक्षा वापस करने के लिए एक विधि लिख सकते हैं

setClass(type) {
  if (type == 'minimum') {
    return 'class-one';
  } else if (type == 'maxmimum') {
    return 'class-two';
  }
}

और फिर नीचे की तरह HTML में इस विधि का उपयोग करें

<div [ngClass]="setClass('minimum')"><div>

इस तरह से आप अपना HTML साफ कर सकते हैं

2
Gaurav Patil 13 जुलाई 2021, 08:47