Angular formGroup : select default value

Question

In Angular, I want to select the default value in the select boxes.

import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
....
....
export class CastComponent implements OnInit {
public form: FormGroup;
public contactList: FormArray;
get contactFormGroup() {
  return this.form.get('contacts') as FormArray;
}
ngOnInit() {
  this.form = this.fb.group({
    crew_name: [null],
    crew_role: [null],
    contacts: this.fb.array([this.createContact()]),
  });
  this.contactList = this.form.get('contacts') as FormArray;
}
...
...
}

In the .html file:

<form [formGroup]="form" (submit)="submit()">
<p class="mb-3">&nbsp;</p>
<h3>Crew</h3>
<div class="row mb-4">
    <div class="col-sm-12 col-md-6 col-lg-6">
        <label class="required">Member Name</label>
        <input type="text" class="form-control" >
    </div>
    <div class="col-sm-12 col-md-6 col-lg-5">
        <label class="required">Role</label>
        <!-- <input type="text" class="form-control" value="Director"> -->
        <select class="form-control" type="text" >
          <option [ngValue]="">Select</option>
          <option [ngValue]="1">Director</option>
          <option [ngValue]="2">Music Composer</option>
          <option [ngValue]="3">Writer</option>
        </select>
    </div>
</div>

<span formArrayName="contacts">
  <div class="row mb-4" *ngFor="let contact of contactFormGroup.controls; let i = index;">
  <div [formGroupName]="i" class="col-sm-12 col-md-12 col-lg-12">
    <div class="col-sm-12 col-md-6 col-lg-6">
        <input type="text" class="form-control" formControlName="crew_name">
    </div>
    <div class="col-sm-12 col-md-6 col-lg-5">
        <!-- <input type="text" class="form-control" value="Writer"> -->
        <select class="form-control" type="text" formControlName="crew_role">
          <option [ngValue]="">Select</option>
          <option [ngValue]="1">Director</option>
          <option [ngValue]="2">Music Composer</option>
          <option [ngValue]="3">Writer</option>
        </select>
    </div>
    <div class="col-sm-1 col-md-1 col-lg-1"><p class="add-more mb-3"><a href="javascript:void(0)" (click)="removeContact(i)"> - remove</a></p></div>
  </div>
</div>
</span>
<p class="add-more mb-3"><a href="javascript:void(0)" (click)="addContact()">+ add</a></p>
<div class="row">
    <div class="col-12 text-right">
        <button class="btn btn-primary" type="submit">Save & Next</button>
    </div>
</div>
</form>

How can I select the default value in the select boxes as above?

please set crew_role as '' in this.form = this.fb.group({ crew_role: [''] }); — Savaj Patel
– Savaj Patel, Commented Mar 12, 2020 at 10:09
When you bind an HTML form control to the form you have created, it will take on the value from the FormControl. You're setting null in the crew_role FormControl rather than an actual value — Kurt Hamilton
– Kurt Hamilton, Commented Mar 12, 2020 at 10:09

Kurt Hamilton · Accepted Answer · 2020-03-12 10:19:57Z

1

Your crew_role <select> isn't defaulting to the Select value because you're not setting the correct value when building the form.

In your HTML you have

<select class="form-control" type="text" formControlName="crew_role">
  <option value="">Select</option>
  <option value="1">Director</option>
  <option value="2">Music Composer</option>
  <option value="3">Writer</option>
</select>

The Select option has the value "". You are setting it to null when you build the form.

Instead of

crew_role: [null],

You should have

crew_role: this.fb.control(''),

DEMO: https://stackblitz.com/edit/angular-ozgh6g

answered Mar 12, 2020 at 10:19

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

3 Comments

Niladri Banerjee - Uttarpara Over a year ago

Thanks! I have just did some amendments in the question. instead value="1" , I did [ngValue]="1" [ngValue]="2" etc. Can you modify your answer based on this?

Kurt Hamilton Over a year ago

Why would you use ngValue instead of value when you just have simple keys?

Kurt Hamilton Over a year ago

No prob :) Just so you know, ngValue and value must be treated with a bit of care. I did an in-depth answer on it here: stackoverflow.com/a/60626545/5367916

Ar123 · Accepted Answer · 2020-03-12 10:33:10Z

1

<select class="form-control" type="text" formControlName="crew_role">
          <option [value]="null">Select</option>
          <option [value]="1">Director</option>
          <option [value]="2">Music Composer</option>
          <option [value]="3">Writer</option>
        </select>

this.form = this.fb.group({
    crew_name: [null],
    crew_role: [null],
    contacts: this.fb.array([this.createContact()]),
  });

just use [value]="null"

answered Mar 12, 2020 at 10:33

Ar123

736 bronze badges

Collectives™ on Stack Overflow

Angular formGroup : select default value

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related