I am using [email protected] release. How would i do a validation on select field?

<div class="form-group" [class.has-error] = "schoolError">
            <label class="control-label" for="lang">Select School</label>
            <select class="form-control" name="school"  
            required #school
            [(ngModel)] = "model.school">
                <option value="default">Select a school</option>
                <option *ngFor= "let sch of school">{{sch}}</option>
            </select>
        </div>   

 <button class="btn btn-primary" 
     [disabled] = "form.invalid" type="submit">Submit</button>

Basically i want to disable the button when the select field is invalid? How do i make the select field invalid when no value is selected?

I am using [email protected] release. How would i do a validation on select field?

<div class="form-group" [class.has-error] = "schoolError">
            <label class="control-label" for="lang">Select School</label>
            <select class="form-control" name="school"  
            required #school
            [(ngModel)] = "model.school">
                <option value="default">Select a school</option>
                <option *ngFor= "let sch of school">{{sch}}</option>
            </select>
        </div>   

 <button class="btn btn-primary" 
     [disabled] = "form.invalid" type="submit">Submit</button>

Basically i want to disable the button when the select field is invalid? How do i make the select field invalid when no value is selected?

• javascript
• angular
• typescript

• When is it supposed to be invalid? If model.school contains a value, it will be assigned to the <select>. Is it then still invalid even when it already has a value and you only have a required validator? Or does model.school not contain an initial value? – Günter Zöchbauer Commented Feb 11, 2017 at 14:25
• @Shane have you figured it out? What is your solution? – Victor Stagurov Commented Nov 28, 2021 at 19:36

7 Answers 7

You can make a boolean variable and assign to it false as default value. When user chooses any option, it will turn true.

https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview

<div>
  <select [(ngModel)]='selected'>
    <option value='one'>Three</option>
    <option value='two'>Two</option>
  </select>
  <button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>

selected:boolean = false;

Try changing the value in your default option to an empty string:

<option [value]="">Select a school</option> 

I run into the same kind of situation and the below snippet seems to work pretty good.

<option [ngValue]="undefined">Select a school</option>

When adding ngForm to your name for your form your validation should work. I assume that is missing, because otherwise your form validation would work as is. So the only thing you would need is to add to your formtag is the aforementioned ngForm, like so:

<form #form="ngForm">

Here's a plunker

I believe you should be able to implement a [disabled]="checkSelectFunction()" on your button and then create a function to check if no value is chosen in the select field.

I am a little late here but the one thing that worked for me was setting the properties to null in the ponent.

For example,

HTML:

<div class="form-group">
  <label for="type">Type</label>
  <select
    class="form-control"
    id="type"
    name="type"
    [(ngModel)]="appointment.typeId"
    required>
    <option *ngFor="let aType of types"
        [value]="aType.appointmentTypeId">
        {{aType.type}}
  </select>

Component:

appointment : Appointment = new Appointment(null);

Where model is:

export class Appointment {
  constructor(
    public typeId: number
  ) {}
}

I hope this helps someone like me who is new to Angular

I tried to give a value to option of the select like

<select id="something" formControlName="something">
  <option value="something">Something</option>
</select>

The value of the option should not be an empty - if it's empty this required field counts as invalid.