Angular 2 - Dropdown validation issue - html

Question

i have tried with many ways:
Validation for select field angular 2
How to apply required validation to dropdown in angular 2
This help me to add validation in dropdown. but i have a issue that validation run properly but when i click on submit button it submit the form if dropdown value is valid or not. i do not want to submit my form if the value of dropdown is "select".
this is my 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>
This is component code:
SaveSymbol() {
this.manageSymbolService.Save(this.manageSymbolViewModel).subscribe(data => {
debugger;
},
error => {
// this.alertService.error(error);
// this.loading = false;
});
}
}

Answer 1

The first and selected option of your select element has a value 0. So it basically it already has a value set to it on page load.
Try to change it to: <option value="" selected disabled>Select</option> and see if that fixes your problem.

Answer 2

Try this
<button [disabled]="loading || !DisplayGroupID.valid || !manageSymbolViewModel.DisplayGroupID" type="submit" class="btn btn primary">Save</button>
This will prevent the form from submitting while there is nothing selected in the dropdown or when the dropdown model is invalid.

Answer 3

please change your form as given below and also pass your status of form through submit function if required
<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>
and initialise the model as
this.manageSymbolViewModel = {
DisplayGroupID: ''
};
refer this plunkr http://plnkr.co/edit/sFTM22xbZSXBLZcv90o2

Answer 4

If I'm reading your question right...
Your first value will be 0. So simply set your [disabled] attribute accordingly.
Example: [disabled]="loading || DisplayGroupId.value == 0"
Your button will not be enabled while the first option is selected. Simple solution.