CODEWITHSUNDEEP
htmlcssangularangular5
Wasif
Wasif

Reputation: 213

i am finding difficult to show red color on border when error occurred

hi i am new to angular 5, i am creating a form for which i have one text-field, when error occurred it shows error-msg for the text-field but border line doesn't turn red.

Here is my code 

<div class="form-group">
    <input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required>
    <app-error-field [displayError]="isValid('name')" errorMsg="Please provide the link of your youtube video "></app-error-field>
  </div>

i am checking for error using isValid function the function works properly that means it gives me error but displayError method for border color doesn't work.

here is the code 

displayCss(field: string) {
return {
  'has-error': this.isValid(field),
};

}

and for 'has-error' i am using this css :

.has-error {
border-color: red !important;

}

Putting all this thing i am not getting the proper result.. please let me know where i am making mistake i am stuck.

Upvotes: 0

Views: 2583

Answers (4)

Hashim Sheikh
Hashim Sheikh

Reputation: 91

It seem you are confused between displayError and displayCss, Your are talking about displayCss but your are not actually using it in your code. If you want to use class in case of error you have to use like this.

<div  [ngClass]="displayCss('name')">
    <input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required>

  </div>

Upvotes: 2

Yamini Chhabra
Yamini Chhabra

Reputation: 1149

You code snippet does not show how you are using displayCss . Alternate approach for adding classes in case of error.

[class]="'error': youTubeLinkInput.invalid :''"



<input class="form-control" type="text" formControlName="name" [(ngModel)]="name" placeholder="Enter Your Youtube Link" required #youTubeLinkInput="ngModel" [class]="'error': youTubeLinkInput.invalid :''">

Note: You have to create local variable (like youTubeLinkInput) for referring input

Now you can add styles to error class like

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

Upvotes: 1

Jay
Jay

Reputation: 151

border: 1px solid red !important;

Hope so that will help you.

Upvotes: 0

Ammar Mehr
Ammar Mehr

Reputation: 67

first you can set the style attribute in the input filed and there you can set the attribute like style="border:1px solid red" or you can set in the CSS where you have written border-color=red replace with border:1px solid red;

Upvotes: -1

Related Questions