CODEWITHSUNDEEP
htmlangularvalidationdropdown
Dhrutika Rathod
Dhrutika Rathod

Reputation: 560

Angular 2 - Dropdown validation issue

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;
                    });
            }
    }

Upvotes: 1

Views: 12017

Answers (4)

user10060984
user10060984

Reputation: 1

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.

Upvotes: 0

sainu
sainu

Reputation: 2701

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

Upvotes: 0

Md Hasan Ibrahim
Md Hasan Ibrahim

Reputation: 1898

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.

Upvotes: 0

unitario
unitario

Reputation: 6535

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.

Upvotes: 5

Related Questions