I'm customizing the CSS of an Angular input component using the .ng-valid[required] method. The component is validating an email string pattern with:
pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" and adjusting the color.
Check out the template:
<input *ngIf="(type == 'email') && showValidation" type={{type}} placeholder={{placeholder}} name={{name}} required class="textfield {{align}}" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}" [(ngModel)]='inputText' (keyup)="onValueChange(inputText)" (blur)="onBlur($event)">
Any idea how I can modify the colors with CSS when I discover that a user already exists in the database?
.ng-valid[required],
.ng-valid.required {
border-left: 5px solid #4fd987;
/* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #e55a5a;
/* red */
}
This is the unique input component:
<wf-input tabindex="0" #username placeholder="Email address" type="email" showValidation="true" (inputEvnt)='user.emailAddress = $event'
(inputEvnt)='validateInputs()' (blur)="checkEmail(user.emailAddress)" name="registration-form_email"></wf-input>
If the email already exists, it should validate as "true" and alter the color of the "border-left".
I came across this example involving ngUnique in AngularJS (1.x), but unfortunately, it's not compatible with Angular 2+.
Example