CODEWITHSUNDEEP
javascripthtmlformsangulartypescript
user1298416
user1298416

Reputation: 341

Angular 2 select does not bind (2nd iteration)

I already asked similar question here Angular 2 select does not bind and thought that it was solved. To follow suggestions I'm now trying to go with reactive forms everywhere and trying to use the suggested option for select:

<form [formGroup]="form">
   <select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</option>
  <option value="item2">&lt; 0.5 cm3</option>
  <option value="item3">&gt; 0.5 cm3</option>
  </select>
<form>

{{form.controls.selectedValue.value}}

The problem is it doesn't work... When it loads for the first time no selected value is displayed. I was only able to make it work using:

<select class="form-control" name="totalvolume" [(ngModel)]="totalvolume" [ngModelOptions]="{ standalone : true }">
     <option value="item1">Select</option>
     <option value="item2">&lt; 0.5 cm3</option>
     <option value="item3">&gt; 0.5 cm3</option>
</select>

But I want to do it properly and get rid of ngModel.

I also tried this:

<select class="form-control" formControlName="progress" [value]="progress">
  <option value="NotStarted">Not Started</option>
  <option value="InProgress">In Progress</option>
  <option value="Finalized">Finalized</option>
</select>
<label>AAA{{form.controls.progress.value}}</label>

it displays the selected option I want (I set it up at the ts file - progress = 'InProgress'), but it somehow doesn't bind it properly as label AAA is empty after the form loads. If I switch select's value, it starts seeing it as there is AAAFinalized is displayed for example... I don't know what I'm doing wrong. BTW {{form.controls.get('selectedValue').value}} gives an error

"inline template:308:7 caused by: self.parentView.context.form.controls.get is not a function"

Either "form.get('selectedValue').value" or "form.controls.selectedValue.value" work.

Upvotes: 0

Views: 112

Answers (2)

AVJT82
AVJT82

Reputation: 73357

Here in this attempt...

<select class="form-control" formControlName="progress" [value]="progress">

in reactive forms, [value] is totally ignored, you need to set the value you want for the FormControl. So if you want to set the variable progress as the initial value, you'd want to do this:

form: FormGroup;
progress = 'InProgress'

constructor(private fb: FormBuilder) {
  this.form = fb.group({
    progress: [this.progress] // here!
  });
}

just like you noticed.

progress variable is completely different from the formcontrol progress. The only thing is that they share the same name, but Angular can't know that you want the initial value of the form control to have the same value as your variable progress unless you tell Angular so.

In this case I also don't see the need of even using a variable progress, you can simply set the initial value as inProgress when you build the form:

this.form = fb.group({
  progress: ['InProgress']
});

Upvotes: 1

VithuBati
VithuBati

Reputation: 1928

If you are using Model-driven form, then first you should define the form controls inside the related component. in your case, put the below coding inside the component 

form: FormGroup;

constructor(private fb: FormBuilder) {
  createForm();
}

createForm(){
  this.form = this.fb.group({
      'selectedValue': ['', Validators.required],
  });
}

If you want to get the value of the select box, you can go ahead and run the below comand 

var selectedValur = this.form.controls['selectedValue'].value;

but if you want to always subscribe to changes then you can do like below.

ngOnInit() {
    const selectValueControl = this.form.get('selectedValue');
    selectValueControl.valueChanges.forEach(
      (value: string) => console.log(value)
    );
  }

Upvotes: 1

Related Questions