Angular2: Validations using md-input

Question

I am new to Angular2. Trying to implement validation in form. But, it doesn't worked for me. I tried this

<form #f='ngForm' (ngSubmit)="onSubmit(f.form)">
  <md-card>
    <md-card-content>
      <div class="frm-ctrl form-group">
        <label>Phone Number :</label>
        <div class="wpr">
          <div class="icon">
            <i class="fa fa-phone"></i>
          </div>
          <md-input ngModel #phonenumber="ngModel" [(ngModel)]="PersonInfo.phonenumber" name="phonenumber" class="ctrl-wpr__ctrl form-group"
            min-length="4" required></md-input>
          {{phonenumber.errors | json}}
        </div>
      </div>
    </md-card-content>
  </md-card>
</form>

Help me where I am doing wrong.

micronyks · Accepted Answer · 2016-09-28 18:19:55Z

1

<md-input ngModel 
          #phonenumber="ngModel" 
          [(ngModel)]="PersonInfo.phonenumber" 
          name="phonenumber" class="ctrl-wpr__ctrl form-group"
          min-length="4" required></md-input>

change this to

<md-input #phonenumber="ngModel"              //<<<===removed ngModel
         [(ngModel)]="PersonInfo.phonenumber" 
          name="phonenumber" 
          class="ctrl-wpr__ctrl form-group"
          min-length="4" required></md-input>

To display error msg you can use this code,

<div [hidden]="phonenumber.valid || phonenumber.untouched" class="alert alert-danger">
      phonenumber is required
</div>

edited Sep 28, 2016 at 18:19

answered Sep 28, 2016 at 17:11

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

7 Comments

Nagarjuna Reddy Over a year ago

thanks for reply. I want to display an error message below to that textbox.

Nagarjuna Reddy Over a year ago

I tried as you said, but it is not working. It is not showing up error message

micronyks Over a year ago

What you need to do is, you type in something in md-input and erase it completely (make it blank), you'll have an error msg. (I'm not sure if its not working with md-input, but it should work with <input type=text>). If it doesn't work please replace md-input by <input type=text> to check whether it works with input type=text.

Nagarjuna Reddy Over a year ago

Yeah it's working as you said. But, without typing anything and Tab out it has display error message.

micronyks Over a year ago

remove || phonenumber.pristine part.

|

Collectives™ on Stack Overflow

Angular2: Validations using md-input

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related