Angular 2 material md-input validation

Question

I'm using the md-input component of material for Angular 2. I know it's still a alpha version of material but maybe someone could explain me how to use the html validation attribute required of Angular 2 with md-input(Is it implemented yet?). I have tried this(works fine):

<md-card>
    <md-input 
        placeholder="Url"
        id="url"
        url="url"
        [(ngModel)]="urlInputValue"
        #url="ngModel"
        required>
        <md-hint *ngIf="url.errors && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint>            
    </md-input>

    <button
        md-raised-button color="accent"
        [disabled]="isUrlInputEmpty()"
        (click)="onRequestBtnClick()">
        Request
    </button>
</md-card>

How I can use 'required'?

<md-hint *ngIf="url.errors.required && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint>

you want a control over the md-input or just you want that it should be required ? — SeleM
– SeleM, Commented Dec 13, 2016 at 20:21
It should be required. When I use url.errors.required instead of url.errors I get "Cannot read property 'required' of null" error message. — hellobasti
– hellobasti, Commented Dec 13, 2016 at 20:27
yes , normally , what do you have in the url in the TS part ? and normally if it is mentioned required in the md-input element it should be required. — SeleM
– SeleM, Commented Dec 13, 2016 at 20:32
I implemented nothing specific for the url in the ts file. Just declared the 'urlInputValue' property. I think I need a container(div?) to prevent the null error of the url.errors.required. How can I do that with md-input? — hellobasti
– hellobasti, Commented Dec 13, 2016 at 20:57

SeleM · Accepted Answer · 2021-10-28 07:24:42Z

2

In your TS file you should have :

import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

export class UrlComponent  {   
   public urlForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {

  this.urlForm = this.formBuilder.group({
  url:    new FormControl('', Validators.required),
   });
  }
//... codes..
}

And change your HTML to :

<form role="form" [formGroup]="urlForm" novalidate>
<md-input 
    placeholder="Url"
    id="url"
    url="url"
    [(ngModel)]="urlInputValue"
    formControlName="url"
    #url="ngModel"
     >
    <md-hint *ngIf="url.errors && (url.dirty || url.touched)" [ngStyle]="{'color': 'red'}"> Url is required </md-hint>            
</md-input>

<button
    md-raised-button color="accent"
    [disabled]="isUrlInputEmpty()"
    (click)="onRequestBtnClick()">
    Request
</button>

</form>

edited Oct 28, 2021 at 7:24

answered Dec 13, 2016 at 21:26

SeleM

9,6785 gold badges36 silver badges55 bronze badges

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

1 Comment

ahmad ali Over a year ago

this is reactive form approach how to to it using template driver approach ?

Collectives™ on Stack Overflow

Angular 2 material md-input validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related