FormBuilder validation is not working properly

Question

I have this form that implements FormBuilder.

I need to show my custom validation message under the input field. With my code below, the validator can make a red "wrong" text appear whenever the input field is blank but it doesn't show my custom validation.

Please see code below for .html and .ts

<form [formGroup]="subscriptionForm">
      <h3 style="color: gray; text-align: center;">Registration</h3>
      <div class="row">
        <div class="col-md-6">
          <div class="md-form">
            <i class="fa fa-user prefix grey-text"></i>
            <input type="text" formControlName="UserName" name='UserName' id="UserName" class="form-control" mdbInputDirective>
            <label for="UserName">Your UserName</label>
            <div *ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)" class="alert alert-danger">
              <div *ngIf="UserName?.errors.required">
                Username is required.
              </div>
            </div>
          </div>
        </div>
      </div>
</form>

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
      UserName: [null, Validators.required],
    });
}

I have gone through the Angular - Form validation docs, that's where I got my codes, but I can't get it right. Thank you.

HDJEMAI · Accepted Answer · 2018-05-03 04:00:34Z

2

Try to change

*ngIf="UserName?.invalid && (UserName?.dirty || UserName?.touched)"

To

*ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched"

In the view:

<div *ngIf="subscriptionForm.get('UserName').hasError('required') && subscriptionForm.get('UserName').touched" class="alert alert-danger">
    Username is required.
</div>

Please try this Demo:

https://stackblitz.com/edit/angular-5xtbxm?file=app/app.component.html

edited May 3, 2018 at 4:00

answered May 3, 2018 at 3:37

HDJEMAI

9,84848 gold badges78 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stack questions Over a year ago

Thank you. Now it is showing my custom message but the red text 'wrong', which is the default error message, keeps appearing and overlapping my custom message. Is there a way I can turn it off? Some more help please.

HDJEMAI Over a year ago

You may have a css issue, can you create a demo that we can help you more, I'm using what I showed you in my own work without any problem.

stack questions Over a year ago

I am acutally using angular mdb for scss. I didn't create any custom css.

HDJEMAI Over a year ago

I've included a working demo, you can adapt it to your specific css by adding the required class you want.

HDJEMAI Over a year ago

@stack questions: this answer is for the problem of error message not showing, if it shows your custom validation now, accept this answer and add a new question about more specifically a css problem. include then a demo and/or relevant files that can other SO members can help you more.

Ashish Ranjan · Accepted Answer · 2018-05-03 03:57:25Z

1

The problem is you are missing the getter methods from the docs, for example:

get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

So now when they access name in their template, they actually access this.heroForm.get('name')

SO what you are required to do in your *ngIf is check for:

subscriptionForm.get('UserName').errors.required

answered May 3, 2018 at 3:57

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

2 Comments

stack questions Over a year ago

Thank you for that. Can you please show me how to get rid of the red text 'wrong' that comes out by default. It's messing my custom message. Thank you.

Ashish Ranjan Over a year ago

@stackquestions: I don't think there is a default wrong text. As @HDJEMAI has added an example, you can refer that. Or else create your own example so that we can debug more.

John Velasquez · Accepted Answer · 2018-05-03 03:34:38Z

0

use subscriptionForm.controls.UserName instead of UserName in your view

answered May 3, 2018 at 3:34

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Comments

thomi · Accepted Answer · 2018-05-03 04:10:16Z

0

To access the form's model, you need to use subscriptionForm.get('UserName'). For this to work properly, I would set the initial value in your model to an empty string instead of null:

constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.subscriptionForm = this.fb.group({
    UserName: ['', Validators.required],
  });

  // also, make access easier using a property...
  get UserName { return this.subscriptionForm.get('UserName'); }
}

answered May 3, 2018 at 4:10

thomi

1,6972 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

FormBuilder validation is not working properly

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related