Winkel-2 Trigger-Formular-Validierung auf " Absenden

Wenn Sie mit Vorlagen Formular können Sie diese syntax verwenden:

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

.ts

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

können Sie auch hinzufügen, einige Fehler auf Einreichen wie diese:

<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>

(Reaktive Form)

Hatte problem mit meine Lösung ist:

-- Template

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

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

-- Klasse

@ViewChild('f') f: FormGroupDirective;

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

Dies ist die Lösung, die ich verwenden, um senden Sie das Formular mit einigen button, der ist nicht in form.

Dank

Komponente html-Datei:
Sie müssen form-group-Modell in form-tag und ngsubmit Methode zum Aufruf der submit-Funktion beim Absenden des Formulars. Bitte fügen Sie die formControlName in jedes input-Feld und die Namen sollten identisch sein, die Sie erklärt haben, in Komponente ts-Datei. mat-Fehler ist die Anzeige der Validierung Fehler. wir übergeben den Rückgabetyp der Funktion in *ngIf die Validierung der Steuerung Fehler und kehren zurück, wahr oder falsch. wenn es true zurück, dann zeigen wir, mat-Fehler.

<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>

Komponente ts-Datei
zuerst müssen wir erklären, die AddForm-Gruppe mit der Art der FormGroup. und mit dem FormBuilder müssen wir die Regeln für diese Besondere form der Gruppe.

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.

   }

}