Я создаю регистрационную форму Angular Material.Одним из элементов ввода является тип = электронная почта.
При отправке ожидается следующее поведение: если электронная почта имеет неправильный формат электронной почты, форма будет недействительной, и я получу ошибку браузера по умолчанию, которую можно увидеть здесь:
Кодовое перо для проверки желаемого поведения
Однако это совсем не то, что происходит.Я использую компоненты Material для построения формы:
<form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<mat-form-field class="form-full">
<input matInput placeholder="First Name" style="width:350px" formControlName="firstName" required />
</mat-form-field>
<mat-form-field class="form-full">
<input matInput placeholder="Last Name" style="width:350px" formControlName="lastName" required />
</mat-form-field>
<mat-form-field class="form-full">
<input matInput placeholder="Email" style="width:350px" type="email" formControlName="email" required />
</mat-form-field>
<mat-form-field class="form-full">
<input matInput placeholder="Password" style="width:350px" type="password" formControlName="password" required />
</mat-form-field>
<mat-form-field class="form-full">
<input matInput placeholder="Confirm Password" style="width:350px" type="password" formControlName="confirmPassword" required />
</mat-form-field>
<mat-card-actions>
<button mat-raised-button mat-button color="primary" type="submit">Register</button>
</mat-card-actions>
</form>
Мой register.component.ts сейчас очень прост, поскольку я только начал строить компонент.Я связываю группу форм с моей формой регистрации и выводю некоторые значения в onSubmit.
export class RegisterComponent {
registerForm;
constructor(private fb: FormBuilder) {
this.registerForm = fb.group({
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
})
}
onSubmit() {
console.log(this.registerForm.value);
console.log(this.registerForm.valid);
}
}
Я ожидаю, что registrationForm.valid имеет значение false, и при нажатии кнопки подтверждения отображается ошибка браузера, однако этоне происходитКонечно, я могу подтвердить это сам, но не получить желаемого поведения сводит меня с ума.
Вот результаты:
Есть мысли?