Angular 2 html form validation

Question

I've created a form using html validations with Angular 2.

I want to to check the sate of the inputs (no empty, correct format, etc) when the user click to a certain button. At the moment I'm doing it as following:

    <form id="memberForm" #memberForm="ngForm" >
        <input
          type="text"
          id="MemberName"
          required
          name="MemberName"
          [(ngModel)]="newMember.name">        
    </form>
    <div  
        [ngClass]="{'button_disabledButton' : !memberForm?.valid}" 
        (click)="onSubmit(memberForm?.valid, memberForm);"> 
            <span>Next</span>
    </div>

With this, I'm only evaluating the input once clicked and focus out. How can I make it hapens when the user click in the "Next" element?

You can use [formGroup] to create some validations in the model, and use a button type submit and valid the the form <input type="button" value="Submit" [disabled]="!(Member.formGroup.valid)" />...something like this. — Lorena Pita
– Lorena Pita, Commented Oct 18, 2017 at 17:22

Roberc · Accepted Answer · 2017-01-04 17:03:47Z

1

You should make getter/setter solution for your ngModel input. In the .ts file in the appropriate class put this:

savedVar:string = '';
get variable(): string {
  return this.savedVar;
}
set variable(str: string) {
  this.savedVar = str;
  // do your validation
}

In template use ngModel=variable like this:

<input [(ngModel)]="variable">

answered Jan 4, 2017 at 17:03

Roberc

1,9563 gold badges11 silver badges12 bronze badges

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

1 Comment

ZanattMan Over a year ago

That would work for just the validation, but I want to use the HTML one and set it as error once clicked, so this solution isn't what I'm looking for

Collectives™ on Stack Overflow

Angular 2 html form validation

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related