कोणीय प्रतिक्रियाशील फॉर्म सत्यापन के आधार पर इनपुट तत्व सीएसएस बदलना - जावास्क्रिप्ट, एचटीएमएल, सीएसएस, कोणीय

मेरे पास एक सरल प्रतिक्रियाशील रूप है:

this.loginForm = this._fb.group({
email: ["", [Validators.required, Validators.pattern("^[A-Za-z0-9._%+-]+@gmail.com$")]],
password: ["", Validators.required]
});

HTML पर:

<!------------------------- PASSWORD FIELD ------------------------->
<div class="uk-margin">
<input type="password" class="uk-input"
placeholder="Enter Password" formControlName="password">

<!----- VALIDATION WARNINGS ----->
<div *ngIf="loginForm.get("password").touched">
<div *ngIf="loginForm.get("password").hasError("required")">
<div class="uk-text-danger"> Password is required.</div>
</div>
</div>
</div>

फिर सीएसएस में:

.ng-valid[required] {
border: 5px solid #42A948;
}

.ng-invalid[required] {
border: 5px solid red;
}

The ng-valid/invalid सीएसएस लागू किया जा रहा है । मैं इनपुट फ़ील्ड्स बॉर्डर का रंग बदलना चाहता हूं ।लेकिन सीएसएस काम मुझे फार्म नहीं है । मैं गलत क्या कर रहा हूं?

अद्यतन करें:

उत्तर:

ng-अमांय और एनजी-मांय हमेशा लागू कर रहे हैं, आप सीएसएस इस को हल करने के लिए और अधिक अनुकूलित कर सकते हैं ।

ng-valid.ng-touched {
border: 5px solid #42A948;
}

ng-invalid.ng-touched {
border: 5px solid red;
}

आप उपयोग कर सकते हैं [ngClass] सशर्त वर्ग के लिए त्रुटि पर आधारित है । उदाहरण के लिए:

<!------------------------- PASSWORD FIELD ------------------------->
<div class="uk-margin">
<input
type="password"
class="uk-input"
placeholder="Enter Password"
formControlName="password"
[ngClass]="{"has-error": loginForm.get("password").touched && loginForm.get("password").hasError("required")}">

<!----- VALIDATION WARNINGS ----->
<div *ngIf="loginForm.get("password").touched">
<div *ngIf="loginForm.get("password").hasError("required")">
<div class="uk-text-danger"> Password is required.</div>
</div>
</div>
</div>

फिर सीएसएस में:

uk-input.has-error{
/* your styles */
}