Angular 2 - Dropdown validation issue

Question

i have tried with many ways:

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

please show your submit function and also form initialisation in your component — sainu
– sainu, Commented May 8, 2017 at 5:53

unitario · Accepted Answer · 2017-05-08 05:56:08Z

5

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.

answered May 8, 2017 at 5:56

unitario

6,5854 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dhrutika Rathod Over a year ago

i removed 0 from value but then also same issue

unitario Over a year ago

Ok then I suspect Angular is treating empty strings as valid input. Change to value selected disabled?

Stephen Kuehl Over a year ago

<option value="" selected disabled>Select</option> worked for me

Md Hasan Ibrahim · Accepted Answer · 2017-05-08 06:05:30Z

0

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.

edited May 8, 2017 at 6:05

answered May 8, 2017 at 5:56

Md Hasan Ibrahim

1,90819 silver badges28 bronze badges

2 Comments

Dhrutika Rathod Over a year ago

this is not what i want. because it is not going to enable any time if i select correct value then also. and i do not want to disable the button.

Md Hasan Ibrahim Over a year ago

@DhrutiRathod the I would suggest to go through: angular.io/docs/ts/latest/guide/forms.html the proper way to control the forms in angular 2

sainu · Accepted Answer · 2017-05-08 08:24:45Z

0

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

edited May 8, 2017 at 8:24

answered May 8, 2017 at 6:35

sainu

2,7013 gold badges26 silver badges43 bronze badges

1 Comment

Dhrutika Rathod Over a year ago

every time isValid true, so page submitted every time

user10060984 · Accepted Answer · 2018-07-10 18:41:52Z

0

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.

answered Jul 10, 2018 at 18:41

user10060984

1

Collectives™ on Stack Overflow

Angular 2 - Dropdown validation issue

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related