CODEWITHSUNDEEP
angulardropdownangular7
Hardik Gondalia
Hardik Gondalia

Reputation: 3717

Set default value of dropdown in Angular 6

I am populating DropDown using service. service returns simple Array of key/value pair.

TypeScript:

public initializeForm(): void {
        this.form = this.fb.group({
            supplierId: ["", [Validators.required]],
            username: ["", Validators.required],
            credentials: ["", [Validators.required]],
            rating: [""]
        })
    }


this.adminService.getSuppliers({ active: "true" }).subscribe(res => {
    this.suppliers = res;
})

HTML:

<select class="form-control" formControlName="supplierId">
     <option>Select Supplier</option>
     <option *ngFor="let s of suppliers" [value]="s.supplierId">{{s.supplierName}}</option>
</select>

As you can see in below image, default option is not set as selected option on page load. I want default option to be selected on page load same like simple HTML and fires required field validation when I try to submit page by selecting default option in dropdown

enter image description here

UPDATED:
If i set default option value to 0, it doesn't support required validation and consider as valid if I select default option

Upvotes: 7

Views: 71343

Answers (9)

PaperinFlames
PaperinFlames

Reputation: 932

You can use set the value as below, where suppliers is any array of dropdown values and suppliers [0] is the default value, which will be already selected.

    this.form.patchValue({
      supplierId: this.suppliers[0], 
    });

Upvotes: 0

Bhavya Shah
Bhavya Shah

Reputation: 45

This works for me

<option [ngValue]="null" selected disabled>Select Supplier</option>

Upvotes: 2

Abid Hussain
Abid Hussain

Reputation: 61

<select class="form-control" [(ngModel)]="someList.key" name="key"  #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>

Worked for me !

Upvotes: 4

Paresh Gami
Paresh Gami

Reputation: 4782

Set validation.min with required as well like below one.

supplierId: ["", [Validators.required, Validators.min(1)]]

supplierId is always greater zero so min(1) works for you.

Upvotes: 4

Shubham Sali
Shubham Sali

Reputation: 482

Include below code on your component.html file 

  <option [value] = "defaultValue">0:(optional_value)</option>

Include below code on your component.ts file.

this.myFormGroup.setValue({
supplierId: defaultValue, 
});

Upvotes: 0

Chris
Chris

Reputation: 1304

Try this, Worked for me.

<select class="form-control" formControlName="supplierId">
  <option [ngValue]="selected" selected disabled>Select Supplier</option>
 <option *ngFor="llet s of suppliers" [ngValue]="s.supplierId">{{s.supplierName}} 
</option>

Upvotes: 2

Yash Rami
Yash Rami

Reputation: 2327

You need to set the value from formControlName

here is the example

this.myFormGroup.setValue({
  supplierId: myValue1, 
});

Upvotes: 4

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can set it by setValue

ngOnInit(){
   let defaultId = 1;
   this.yourForm.controls['supplierId'].setValue(defaultId);
}

Upvotes: 2

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

You can have a default value as 0 for the default option. (0 is juts an example, you can have any default value)

<option value="0">Select Supplier</option>

When you create the form control for the dropdown initialize it with the default value.

// wharever your form name is, this is just an example
this.form = this._formBuilder.group({  
    .....
    supplierId: [0]  // initialize the control with the default value
    ....
})

Upvotes: 0

Related Questions