Angular watch input value

Question

What is the best practice to watch the value of an input HTML element? I need to dynamically add as much inputs as i want to. Hence, I cannot use ngModel. At this point I'm using ElementRef.

<div class="item">
    <input type="text" id="firstName1">
    <input type="text" id="lastName1">
</div>

I'm trying to create an object, where the values adapt to changes:

let user = {
   firstName: ADAPT_TO_FIRSTNAME_VALUE,
   lastName: ADAPT_TO_LASTNAME_VALUE
}

Solution Approach:

<form [formGroup]="user">
    <input type="text" formControlName="firstName">
    <input type="text" formControlName="lastName">
</form>


arr = new FormArray();
user;

create() {
    this.user = new FormGroup({
         firstName: new FormControl(),
         lastName: new FormControl()
    });
    this.arr.push(user);
}

do you need one input for each user object property? and the properties are dynamic? or one input for each user object? — Tomasz Kula, Apr 14 '18 at 09:38

Tomasz Kula · Accepted Answer · 2018-04-14T10:09:09.867

Something like this should get you started.

import { Component,  } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="form">
    <input *ngFor="let control of controls" [formControl]="control" />
  </form>

  {{ user | json }}
  `,
  styles: [`input { width: 100%; }`]
})
export class AppComponent {
  form: FormGroup;
  controls: FormControl[];

  get user() {
    return this.form.value;
  }

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      firstName: '',
      lastName: '',
      // add as much properties as you like
    })

    this.controls = Object.keys(this.form.controls).map(key => this.form.controls[key] as FormControl);
  }
}

We create one FormControl for each user object property. Any change in the <input> html element will be reflected in the FormGroup's value.

Please note that I'm using the ReactiveFormsModule and you must import it in your AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Live demo

Thank you! Can you give me any advice how to make it more dynamically? How am I going to do this if I have multiple user formGroups but I don't know how many? I mean I cannot create `form` variables dynamically right? — Binabiko, Apr 14 '18 at 11:09
What is the dynamic part? User object property names? Or the number of users? — Tomasz Kula, Apr 14 '18 at 11:18
Create one `FormGroup` for each user object and wrap everything in `FormArray`. — Tomasz Kula, Apr 14 '18 at 11:36
I Updated my question by an solution approach. Is this what you are suggesting? — Binabiko, Apr 14 '18 at 11:44

Angular watch input value

1 Answers1