Angular 2 - Wie wird das Formular validiert?

Question

Ich habe diese Form

@Component({ 
    template: ` 
     <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate> 
      <input name="detail" id="detail" formControlName="detail"></input> 
      <div *ngIf="formGroup.controls['detail'].dirty && formGroup.controls['detail'].invalid">This is required</div> 
      <button type="submit" >Post</button> 
     </form> 
    `, 
}) 
export class CreateDiscussionComponent { 
    formGroup: FormGroup; 
    submitted: boolean = false; 
    constructor(
    ) { 
     this.formGroup = new FormGroup({ 
      detail: new FormControl('', [Validators.required, Validators.minLength(2) ]), 
     }); 
    } 
    onSubmit(): void { 
     this.submitted = true; 
     console.log(this.submitted) 
    } 
} 

, was es tut, ist, senden Sie das Formular, wenn ich einreichen klicken oder eingeben.

Problem: Wenn ich leere Wert einreichen, wird es ermöglichen, zu übermitteln. Was schlecht ist.

Es sollte nicht zulassen und den Fehler anzeigen.

Answer 1

Sie benötigen Validators.compose. Versuchen Sie folgendes Beispiel. Und auch die [disabled]="!form.valid" hinzufügen, wäre nett.

myform.html

<div> 
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> 
     <div class="form-group row"> 
      <label for="zipCode" class="col-sm-2 control-label">Zip Code</label> 
      <input [formControl]="zipCode" type="text" class="form-control" id="zipCode" placeholder="Enter your Zip Code"> 
     </div> 
     <div class="form-group row"> 
      <button [disabled]="!form.valid" type="submit" class="btn btn-default">Request</button> 
     </div> 
    </form> 
</div> 

myform.ts

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

    @Component({ 
     selector: 'myform', 
     encapsulation: ViewEncapsulation.None, 
     template: require('./myform.html') 
    }) 
    export class MyForm { 
     public form:FormGroup; 
     public zipCode:AbstractControl; 
     public submitted:boolean = false; 

     constructor(fb:FormBuilder) { 
      this.form = fb.group({ 
       'zipCode': ['', Validators.compose([Validators.required, Validators.minLength(6)])] 
      }); 
      this.zipCode = this.form.controls['zipCode']; 
     } 

     public onSubmit(values:Object):void { 
      this.submitted = true; 
      if (this.form.valid) { 
       console.log("FORM VALUES: "+values); 
      } 
     } 
    } 

Answer 2

Ihre falschen <input name="detail" id="detail" formControlName="detail"></input>, Eingang ist ungültig Element, darf kein Tag zu schließen.

btw, Sie haben 2 Validatoren, Sie verbreiten Fehlermeldungen müssen:

Online-Demo: https://plnkr.co/edit/PVndhkpyfY6s1iq5RPsY?p=preview

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

@Component({ 
    selector: 'app-root', 
    template: ` 
    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()" novalidate> 
     <input name="detail" id="detail" formControlName="detail"> 
     <div *ngIf="formGroup.get('detail').dirty && formGroup.get('detail').hasError('required')">This is required</div> 
     <div *ngIf="formGroup.get('detail').dirty && formGroup.get('detail').hasError('minlength')"> 
     This field requires min length: {{ formGroup.get('detail').errors.minlength?.requiredLength }}, 
     actual length: {{ formGroup.get('detail').errors.minlength?.actualLength }} 
     </div> 
     <div><button type="submit" [disabled]="formGroup.invalid">Post</button></div> 
    </form> 
    ` 
}) 
export class AppComponent implements OnInit { 
    formGroup: FormGroup; 
    submitted: boolean = false; 
    constructor(
    ) { 
    this.formGroup = new FormGroup({ 
     detail: new FormControl('', [Validators.required, Validators.minLength(2) ]), 
    }); 
    } 
    onSubmit(): void { 
    console.log(this.formGroup); 
     this.submitted = true; 
    if (this.formGroup.valid) { 
     console.log(this.submitted); 
     // do submit form data to server 
    } 
    } 
}