Angular 2 - Dropdown Validierungsproblem

Question

Ich habe mit vielen Möglichkeiten ausprobiert:

Validation for select field angular 2

How to apply required validation to dropdown in angular 2

Diese mir helfen Validierung in Dropdown-Liste hinzufügen. aber ich habe ein Problem, dass Validierung richtig ausgeführt, aber wenn ich auf Senden Schaltfläche klicken, senden Sie das Formular, wenn Dropdown-Wert gültig ist oder nicht. Ich möchte mein Formular nicht abschicken, wenn der Wert von Dropdown "Auswählen" ist.

das ist mein HTML-Code:

<form name="form" (ngSubmit)="f.form.valid && SaveSymbol()" #f="ngForm" novalidate> 
     <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !DisplayGroupID.valid && !manageSymbolViewModel.DisplayGroupID }"> 
      <label for="DisplayGroupID">Display Group</label> 
      <select class="form-control" name="manageSymbolViewModel.DisplayGroupID" #DisplayGroupID id="manageSymbolViewModel.DisplayGroupID" [(ngModel)]="manageSymbolViewModel.DisplayGroupID" required> 
      <option value="0" selected disabled>Select</option> 
      <option *ngFor="let group of result.DisplayGroups" value={{group.DisplayGroupId}}> 
        {{group.DisplayGroup}} 
       </option> 
      </select> 
      <div *ngIf="f.submitted && !DisplayGroupID.valid && !manageSymbolViewModel.DisplayGroupID" class="help-block">Display Group is required</div> 
     </div> 

<div class="form-group"> 
     <button [disabled]="loading" type="submit" class="btn btn primary">Save</button> 
     <a [routerLink]="['/login']" class="btn btn-link">Cancel</a> 
</div> 
</form> 

Diese Komponente Code ist:

SaveSymbol() { 
     this.manageSymbolService.Save(this.manageSymbolViewModel).subscribe(data => { 
        debugger; 

       }, 
        error => { 
         // this.alertService.error(error); 
         // this.loading = false; 
        }); 
      } 
    } 

Answer 1

Die erste und option Ihres select Element ausgewählt hat einen Wert 0. Es hat also bereits einen Wert beim Laden der Seite.

Versuchen Sie, es zu ändern: <option value="" selected disabled>Select</option> und sehen Sie, ob das Ihr Problem behebt.

Answer 2

Versuchen Sie, diese

<button [disabled]="loading || !DisplayGroupID.valid || !manageSymbolViewModel.DisplayGroupID" type="submit" class="btn btn primary">Save</button> 

Dies wird die Form verhindern, dass die Einreichung während es nichts in der Drop-Down-oder, wenn das Drop-Down-Modell ausgewählt ist, ist ungültig.

Answer 3

bitte Ihre Form ändern, wie unten angegeben und auch Funktion Ihres Status Form durch einreichen übergeben, wenn

erforderlich

<form #f="ngForm" (submit)="f.valid && SaveSymbol(f.value, f.valid)" novalidate> 
    <div class="form-group"> 
     <label>Display Group</label> 
     <select ngControl="DisplayGroupID" #DisplayGroupID="ngForm" [(ngModel)]="manageSymbolViewModel.DisplayGroupID" required> 
     <option value='' disabled>Select</option> 
     <option *ngFor="let group of DisplayGroups" value={{group.DisplayGroupId}}>{{group.DisplayGroup}}</option> 
     </select> 
     <small [hidden]="DisplayGroupID.valid || (DisplayGroupID.pristine && !submitted)" class="text-danger"> 
      Displaygroup is required 
     </small> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

und initialisieren das Modell als

this.manageSymbolViewModel = { 
     DisplayGroupID: '' 
    }; 

verweisen diesem plunkr http://plnkr.co/edit/sFTM22xbZSXBLZcv90o2