Angular Reactive Form - Options dropdown menu

Question

Is there a way to display form values from an Observable using the reactive approach? I have a form with hard-coded data for this example and it displays my list of Labels in the HTML, but I am facing two issues I hope someone can spot that I'm not seeing/understanding.

There is a TypeError: Cannot read property 'label' of undefined when using this.labels$[0].label as the initial form value for the field. I was hoping it would pull in the first label from my labels$() list.
If I change the above to a string e.g. 'Test', the dropdown menu renders and I get the following

{"labels": "Test", "field1": "Some value", "field2": "Some value" } but when I change the dropdown menu, it removes the labels value completely.

{"field1": "Some value", "field2": "Some value" }

TS

get labels$() {
  return [
        { "label": "label-1" }, // e.g. Mr.
        { "label": "label-2" },
        { "label": "label-3" },
        { "label": "label-4" }
      ];
}

HTML

<rx-select formControlName="labels" [options]="labels$ | async" [label]="Label"></rx-select>

Component.ts

return new FormGroup({
          labels: new FormControl('', [Validators.required]),
          field1: new FormControl('', [Validators.required]),
          field2: new FormControl('', [Validators.required]),
        });

Form

The ideal form value would be the following where I could see the values change with my interaction.

{"labels": "label-1", "field1": "Some value", "field2": "Some value" }

Any advice appreciated as I navigate the reactive form experience ;)

By convention, suffixing a variable with '$' is done when this variable is an Observable. It seems that it should be an observable, since you're using labels$ | async. But it's not: it's an array. You also use the name labels, with a final s, to reference a single label. Very confusing again. Fix those errors, and post a complete minimal example as a stackblitz, explaining what you're doing, what you expect to happen, and what happens instead. — JB Nizet
– JB Nizet, Commented Jul 15, 2019 at 16:29
@JBNizet - yes $ is associated with an Observable but for this example, the data was hardcoded array which is what my observable object is when complete. As for labels, it is as is. i.e. a list of labels! Tnx — mkeo99
– mkeo99, Commented Jul 16, 2019 at 12:33

Arshad · Accepted Answer · 2019-07-15 18:53:06Z

1

If you want to just view the value of a FormGroup, then you can do it in 2 ways:

Print the value for FormGroup instance in the HTML, with async pipe. json pipe is needed to format the object into text.

In the HTML file:

formGroupInstance.valueChanges | async | json

Print the value for FormGroup instance in the Console, by subscribing to the valueChanges.

In the TypeScript File:

formGroupInstance.valueChanges.subscribe(value => console.log(value));

You can find an example HERE | stackblitz.com

answered Jul 15, 2019 at 18:53

Arshad

2283 silver badges10 bronze badges

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

Comments

mkeo99 · Accepted Answer · 2019-07-16 14:08:05Z

0

Found the issue. The json object needs a value in order to render correctly in the directive dropdown. So changing { "label": "label-1" } to { "label": "label-1", "value": "value1" } works.

answered Jul 16, 2019 at 14:08

mkeo99

1352 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular Reactive Form - Options dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related