Angular 2 Проверка формы триггера при отправке

Ответ 1

Если вы используете шаблонную форму, вы можете использовать этот синтаксис:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <button type="submit">Save</button>
</form>

.ts

add(isValid: boolean){
   if(isValid){
       //do something
   }
}

вы также можете добавить некоторые ошибки в submit следующим образом:

<form #f="ngForm" (submit)="add(f.valid)" novalidate>
    <label>Name</label>
    <div>
        <input [(ngModel)]="name" name="name" #name="ngModel" required>
    </div>
    <div[hidden]="name.valid || (name.pristine && !f.submitted)">
        <small class="text-danger">Please input name</small>
    </div>
    <button type="submit">Save</button>
</form>

Ответ 2

Валидация должна выполняться каждый раз при изменении модели. Но, возможно, вы не можете увидеть сообщение об ошибке, потому что FormControl нетронутым? Вот мое решение, которое отлично работает.

Я сделал это с помощью следующих простых шагов:

• Внедрение FormComponent (selector "form" ), который вводит форму GroupDirective (подписывается на событие отправки и присваивается как истинный)

    @Component({
        selector: 'form',
        templateUrl: 'form.component.html',
        styleUrls: ['form.component.scss']
    })
    export class FormComponent implements OnInit {
        @Output() submit = new EventEmitter();

        constructor(@Optional() private formGroupDirective: FormGroupDirective) {
        }

        ngOnInit() {
            if (this.formGroupDirective) {
                this.formGroupDirective.ngSubmit.subscribe(() => {
                    this.formGroupDirective.form['submitted'] = true;
                });
            }
        }

    }

Важные строки находятся в ngOnInit

2. Проверьте форму, представленную для отображения ошибки

   * ngIf = "control?.hasError('required') && (control?.touched || form?.submitted)"

Надеюсь, что поможет

Ответ 3

(реактивная форма)

У меня проблема с моим решением:

- Шаблон

<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside 
form</button>

<form novalidate #f="ngForm" (ngSubmit)="save($event)" 
[formGroup]="MyformGroup">
...
</form>

- Класс

@ViewChild('f') f: FormGroupDirective;

submit(formDirective: FormGroupDirective) {
  console.log('valid', formDirective.valid);
  console.log('value', formDirective.value);
}

Это решение, которое я использую для отправки формы с помощью кнопки, которая не находится в форме.

Спасибо

Ответ 4

Вы можете выполнить обе проверки (на кнопке отправки показать все ошибки с сообщением об ошибке и отдельным сообщением об ошибке) с помощью Angular Material (MatFormFieldModule). После долгих НИОКР моя проблема разрешилась, но сначала вам понадобятся хорошие знания угловых материалов.

Пример кода: -

<form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value,loginForm)"> 
 <mat-form-field>
    <input matInput placeholder="Enter your email" formControlName="email">
      <mat-error *ngIf="loginForm.controls['email'].hasError('required')">Required</mat-error>
      <mat-error *ngIf="loginForm.controls['email'].hasError('email')">Invalid Mail</mat-error>
 </mat-form-field>
</form>

код файла login.ts:

private createLoginForm() {
  this.loginForm = this.fb.group({
    email: new FormControl('', [Validators.required, Validators.email]),
  })
}  

Вы можете прикрепить больше валидатора по вашему требованию.

Ответ 5

html файл компонента: необходимо добавить модель группы форм в тег формы и метод ngsubmit, чтобы вызвать функцию отправки при отправке формы. Пожалуйста, добавьте formControlName в каждое поле ввода, и имя должно совпадать с тем, которое вы объявили в файле ts компонента. mat-error - показать ошибку валидации. мы передаем одну функцию возвращаемого типа в * ngIf, которая проверит ошибку управления и вернет значение true или false. если он возвращает true, то мы показываем mat-error.

<form [formGroup]="Addform" (ngSubmit)="submit(Addform)">
   <h1 mat-dialog-title>Add Field</h1>
   <mat-dialog-content>
      <mat-form-field>
         <input matInput formControlName="make" placeholder="Make...">
         <mat-error *ngIf="hasError('make', 'required')">Make is required</mat-error>
      </mat-form-field>
   </mat-dialog-content>
</form>

компонента ерей файл сначала мы должны объявить группу AddForm с типом FormGroup. и используя FormBuilder, мы должны установить правила для этой конкретной группы форм.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-comp',
  templateUrl: './app-comp.html'
})

export class CustomAddForm implements OnInit {
   Addform: FormGroup;
   submitted = false; // by default set submitted to false
   constructor(
     private formBuilder: FormBuilder
   ) {}

   ngOnInit() {
     // initialization time assign the form control rules to form builder.
     this.Addform = this.formBuilder.group({
      make: ['', Validators.required]
     })
   }

   // getter function to provide the control validation info to html 
   public hasError = (controlName: string, errorName: string) =>{
      return this.Addform.controls[controlName].hasError(errorName);
    }

   // submit function
   submit(Addform) {
      if (this.Addform.invalid) { 
      // if condition to check the form group validation.
      // show validation alert here.
         return;
     }

      this.submitted = true;
      // add you success code here.

   }

}