Подтверждение формы при нажатии кнопки «Отправить» в Angular - PullRequest
Новая
       3

Подтверждение формы при нажатии кнопки «Отправить» в Angular

0 голосов
/ 23 января 2020

Я создал реактивную форму в angular. Я могу получить подтверждение элемента управления на ощупь, но не получаю подтверждение при отправке формы, нажав кнопку отправки. Мой код как показано ниже: 

<form [formGroup]="myform" (ngSubmit)="SubmitDetails()">
  <div class="row">
      <label for="name">Name:</label>

  <input type="text" id="Name" name="Name" formControlName="Name"/>
  <span *ngIf="myform.controls.Name.invalid && myform.controls.Name.touched">Please Enter Name.</span>

  </div>
<br/>
<div class="row">
    <label for="age">Age:</label>
  <input type="text" id="Age" name="Age" formControlName="Age"/>
<span *ngIf=" myform.controls.Age.invalid && myform.controls.Age.touched">Please Enter Age.</span>
</div><br/>

  <button type="submit">Submit</button>
</form>

Ответы [ 2 ]

0 голосов
/ 23 января 2020

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

<button type="submit" [disabled]="form.invalid">Submit</button>
0 голосов
/ 23 января 2020

Вы можете проверить, является ли ваша форма действительной с помощью свойства vaild formGroup: 

this.yourFormGroup.valid;

В вашей функции отправки просто проверьте, является ли форма действительной, если да, то продолжайте, иначе пометьте форму как грязную или коснулся: 

submitFunction() {
  if(this.yourFormGroup.valid) {
    console.log('it s ok!');
  }else {
    this.yourFormGroup.markAsDirty();
}

Редактировать: У меня есть сомнения по поводу использования markAsDirty в formGroup, если он не работает, просто просто l oop all formControl из formGroup и пометить их как dirty (): 

this.yourFormGroup.get('yourFormControl').markAsDirty();
...