Angular 5 grouping input with select

Question

I have a Reactive form that group select on the left and input type number on the right and I want to get a value that combines this two.

For example

dynamicForms.html

<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form">

    <div fxLayout="row" fxLayoutGap="10px" *ngSwitchCase="'number'">

        <mat-form-field *ngIf="prop.units !== [];" fxFlex="80px">
          <mat-select placeholder="Unit" (change)="form.value.frequencies.unit = 'KHz';">
            <mat-option *ngFor="let unit of prop.units" [value]="unit">
              {{ unit }}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field *ngSwitchCase="'number'" fxFlex="100" class="full_width">
          <input 
            type="number" 
            matInput 
            [formControlName]="prop.key"
            [placeholder]="prop.key" 
            [id]="prop.key"
            [min]="prop.min"
            [max]="prop.max"
            value="{{prop.value}}">
          <mat-icon *ngIf="prop.description" class="inp_description" matTooltip="{{prop.description}}" matTooltipShowDelay="500" matSuffix>help</mat-icon>
        </mat-form-field>

      </div>


</form>



   <p>
       <button mat-raised-button [disabled]="form.invalid" type="submit">Save</button>
   </p>

What I get is:

frequencies: 58

And what I want on submit is this values.

    frequencies: {
       value: 58,
       unit: 'KHz'
    }

I try every trick I know in Anguar but nothink is work

I try everything I know sow far but I cant make that nested object — user6600549
– user6600549, Commented Feb 5, 2018 at 11:08
@JEY I try to separate the select from input and I want to know if is HZ, KHz or GHz — user6600549
– user6600549, Commented Feb 5, 2018 at 11:09
Yes but you nead to know that this is dynamic forms with reactive forms — user6600549
– user6600549, Commented Feb 5, 2018 at 11:18

Shrey Kejriwal · Accepted Answer · 2018-02-05 11:35:08Z

0

You can create group controls in the following way:

this.entryForm = new FormGroup({
  'frequencies': new FormGroup({
    'value': new FormControl(),
    'unit': new FormControl()
  })
})

In your html form add a div to group these controls, and change the path of formControlName in the fields.

<form [formGroup]="entryForm">
  <div formGroupName="frequencies">
    <input type="number" formControlName="value" />
    <select formControlName="unit">
      <option value="khz">Khz</option>
    </select>
  </div>
</form>

answered Feb 5, 2018 at 11:35

Shrey Kejriwal

7364 silver badges13 bronze badges

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

1 Comment

user6600549 Over a year ago

Shrey thank you looks like this is the solution but when I try this I get that error ERROR Error: Cannot find control with path: 'frequencies -> '

Collectives™ on Stack Overflow

Angular 5 grouping input with select

dynamicForms.html

What I get is:

And what I want on submit is this values.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

dynamicForms.html

What I get is:

And what I want on submit is this values.

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related