CODEWITHSUNDEEP
angular
Youri
Youri

Reputation: 313

Want to make border color red when input is invalid

I now have a text appear that says the input is invalid, but I would like to make the border red instead of displaying this text, because it looks pretty sloppy. I wondered how I can do this, can't seem to find a right solution online.

This is the code at the moment: 

 <input placeholder="Vraag" formControlName="actualQuestion" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.actualQuestion.errors?.required"> This field is required. </div>
                        <input placeholder="Optie 1" formControlName="option1" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.option1.errors?.required"> This field is required. </div>
                        <input placeholder="Optie 2" formControlName="option2" type="text" class="form-control">
                        <div class="text-danger" *ngIf="isSubmitted && formControls.option2.errors?.required"> This field is required. </div>

I uploaded an image with a drawn border around "Optie 1" to clarify what I mean. enter image description here

Upvotes: 7

Views: 39394

Answers (7)

H S W
H S W

Reputation: 7119

It can done by using ngClass directive as follow:

<input type="email" class="input" [ngClass]="{'red-border-class': submitted && formControl.email.errors}" id="inputEmail" formControlName="email" placeholder="Enter Email">


.red-border-class { border: red 1px solid;}

Upvotes: 0

Sven J&#228;ger
Sven J&#228;ger

Reputation: 133

You could also just add in you css-file this pointer:

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

Upvotes: 9

Peter Kipper
Peter Kipper

Reputation: 66

One option would be to use angular ng-style or ng-class directive and when there you can use your validation. if its true (you have an error), border-color will bed set to red, else grey or none or whatever :d

[ngStyle]="{'border-color': form.hasError['required'] ? 'red' : 'grey'}"

something like that could work

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27303

Angular append many control properties onto the form control element as CSS classes.

So you can use the .ng-valid and .ng-invalid classes to set the color of each form control's border.

.ng-invalid:not(form)  {
  border: 2px solid red /* red */
}

Example

Upvotes: 2

Arvind
Arvind

Reputation: 70

<div class="form-group" [ngClass]="
                                            formFieldCss(
                                                form_Need,
                                                formSubmitAttempt,
                                                'zipcode'
                                            )
                                        ">
                                        <label>Zip Code
                                            <i class="text-danger" *ngIf="!isViewFlag">*</i></label>
                                        <input type="text" class="form-control" name="zipcode" formControlName="zipcode" numbersOnly
                                            maxlength="5" />
                                        <span *ngIf="
                                                form_Need.get('zipcode').hasError('required') &&
                                                form_Need.get('zipcode').touched
                                            " class="help-block">This field is required</span>
                                        <span *ngIf="
                                                form_Need.get('zipcode').hasError('whitespace') &&
                                                !form_Need.get('zipcode').hasError('required') &&
                                                form_Need.get('zipcode').touched
                                            " class="help-block">This field is required</span>
                                    </div>

call this function

formFieldCss(form, formSubmitAttempt, field: string) {
    return {
        'has-error': this.formFieldValid(form, formSubmitAttempt, field),
        'has-feedback': this.formFieldValid(form, formSubmitAttempt, field)
    }
}


formFieldValid(form, formSubmitAttempt, field: string) {

    return (
        (!form.get(field).valid && form.get(field).touched) ||
        (form.get(field).untouched && formSubmitAttempt)
    )
}

formValid(form) {
    return form.invalid;
}

Upvotes: 0

hawks
hawks

Reputation: 931

You can add an .invalid class when validation fails.

.invalid {
   border: 1px solid red;
 }
<input placeholder="Vraag" formControlName="actualQuestion" type="text" class="form-control" [class.invalid]="isSubmitted && formControls.actualQuestion.errors?.required">

Upvotes: 0

Ling Vu
Ling Vu

Reputation: 5181

You can get the error state by:

By styling your error state you can set an ngClass which takes an expression to set the class:

formControls.controls.option1.isValid

Apply this boolean to your selector:

<input [ngClass]="{'input-error': formControls.controls.option1.isValid} placeholder="Optie 1" formControlName="option1" type="text" class="form-control">

In your .scss/.css you can then apply your styles to the class .input-error like:

.input-error {
    border: red 1px solid;
}

Upvotes: 2

Related Questions