Как запретить отправку формы, пока не пройдут все проверки [Angular 7]

Question

Я новичок в Angular. Я внимательно прочитал этот , этот и этот вопрос, но ни один из них мне не подходит, поскольку они используют jquery. Моя форма довольно простая форма регистрации только с 4 основными полями. Имя пользователя, пароль, подтверждение пароля, почтовый индекс и кнопка отправки. Чтобы сохранить этот пост в чистоте и задействовать несколько файлов, я загрузил необходимые файлы на github.

1. app.component.html
2. app.component.ts
3. app.module.ts

И я обрабатываю валидаторы для password и zipcode отдельно в

validator.ts

Проверки работают отлично. Но проблема в том, что форма все еще отправляется, даже если на веб-интерфейсе есть проблемы с проверкой. Вот мой скриншот. Пожалуйста, предложите мне решение или хотя бы дайте намек.

PS: я следую этому учебнику YouTube.

Answer 1

Сначала отключите кнопку

<button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="!form.valid">Submit</button>

Далее используйте условие перед отправкой.

  onSubmit(){
    if (!this.form.valid) return;

    // console.log(this.form.controls.zip);
    this.form.markAsTouched();
    console.log(this.form.value);

  }

Наконец, добавьте этот атрибут в форму:

<form [formGroup]="form" novalidate>