CODEWITHSUNDEEP
htmlregexangularmaterial-design
Emily McMullin
Emily McMullin

Reputation: 121

Material design form required pattern

I want to have a required pattern for my fields, but the regex's I'm using aren't working & can't figure out why. I also want to center my 'onboard' button. here is a stackblitz link to my code: https://stackblitz.com/edit/angular-hpmxym?file=src%2Fapp%2Fapp.component.html

the required patterns I would like are as followed: first name/last name: letters only, max 30 phone number: numbers only, max 10 zip: numbers only max 5 address: numbers and lettters only city/state: letters only

and button center

Upvotes: 1

Views: 163

Answers (1)

Sunil
Sunil

Reputation: 11243

If you want to use template driven validation then you can leverage the ngModel to capture the value of element and perform the validation. Here is the sample code - 

<input maxlength="5" type="text" name="zip" #zip="ngModel" [(ngModel)]="zipCode" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" placeholder="Zipcode" />

To make the button or control centered, you can wrap it inside div as 

<div class="wrapper">
   <input type="submit" name="signup_submit" value="onboard" (click)="changeView(15)"/>

and use css

.wrapper {
    text-align: center;
}

Sample working demo is here . - https://stackblitz.com/edit/angular-1jdtpv

Upvotes: 1

Related Questions