Материал дизайн формы, требуемый шаблон

Question

Я хочу иметь обязательный шаблон для моих полей, но регулярное выражение, которое я использую, не работает и не может понять, почему.Я также хочу центрировать мою кнопку на борту.Вот ссылка на мой код, сделанная в стеке: https://stackblitz.com/edit/angular-hpmxym?file=src%2Fapp%2Fapp.component.html

необходимые мне шаблоны: имя / фамилия: только буквы, макс. 30 телефонных номеров: только цифры, макс. 10 почтовых индексов: цифрытолько макс. 5 адрес: только цифры и буквы только город / штат: только буквы

и центр кнопки

Answer 1

Если вы хотите использовать шаблонную валидацию, вы можете использовать ngModel, чтобы зафиксировать значение элемента и выполнить валидацию.Вот пример кода -

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

Чтобы центрировать кнопку или элемент управления, вы можете заключить его в div как

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

и использовать css

.wrapper {
    text-align: center;
}

Пример рабочей демонстрации здесь.- https://stackblitz.com/edit/angular-1jdtpv