How to use validator to change border color of formcontrolname in angular

Question 1

I have a formcontrol where I want to change the color when the field is invalid I have tried the following as most examples do the same:

 <input 
        formControlName="personNameField"
        type="text"
        placeholder="Bitte eingeben"
        [ngClass]="{'error': personNameField.errors}"
        ></input>

My ts formcontrol is generated like this:

    form = this.builder.group({
    personNameField: new FormControl('',
      [Validators.required]),
  });

  getName(){
    this.form.get('personNameField')
  }

But I am getting the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

any idea what I am doing wrong?

UPDATE: I added the getter and removed the question mark but still the bordering does not work only error message is shown.

UPdate2:

.error {
    // underline input field on error
    border: 1px solid red;
    display: block;
    color: red;
}

What I want

What I get

Question 2

Try this.

[ngClass]="{'error': form.get('personNameField')?.errors}"

Question 3

so simple for input validation using bootstrap class : First in you HTML file we have :

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

so in your ts file :

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

by this, you can validate the input so simply .

N.F. · Answer 1 · 2021-11-24T06:51:12

-1

Try this.

[ngClass]="{'error': form.get('personNameField')?.errors}"

N.F.

2021-11-24 06:51:12

hey thanks this brought me one step further but now there is just one big rectangle around the label and input. I only want to change the border color do you have an idea on how to change my scss? I updated my code

natyus

Sorry I can not understand what you are trying to do. Please show with an image.

N.F.

I did add pictures

natyus

Your html in this post does not have a label. Please update your post so that it includes all the part "What I get".

N.F.

Seyed-Amir-Mehrizi · Answer 2 · 2021-11-24T07:22:10

so simple for input validation using bootstrap class : First in you HTML file we have :

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

so in your ts file :

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

by this, you can validate the input so simply .

How to use validator to change border color of formcontrolname in angular

In other languages

This page is in other languages

Popular in the category