Как только подтвердить форму при ее отправке?

Я работаю с этой простой реактивной формой, и я пытаюсь проверить ее только при нажатии кнопки «Отправить данные» . Может кто-нибудь сказать мне, что я пропущу, пожалуйста? Заранее большое спасибо!

Вот мой код: LIVE DEMO 

 get username(){
   return this.registrationFormGroup.get('username');
 }

 get userlastname(){
  return this.registrationFormGroup.get('userlastname');
 }

 get userage(){
  return this.registrationFormGroup.get('userage');
 }

 onSubmit(){
   if(this.registrationFormGroup.valid){
    console.log('Sending data...');
    console.log(this.registrationFormGroup.value);
   }
 }

Всего 1 ответ

Вы используете field.touched и вы можете использовать условие, если форма отправлена.

С #form="ngForm" вы можете использовать условие form.submitted . 

<form #form="ngForm" [formGroup]="registrationFormGroup" (ngSubmit)="onSubmit()">
    <input [class.is-invalid]="form.submitted && username.invalid" type="text" formControlName="username"><br/>
    <small *ngIf="form.submitted && username.invalid && username.errors.required" style="color:red;">Name is required</small>

    //Rest of your form... 
</form>

Вы можете видеть в этом ДЕМО

Есть идеи?

10000