13480

How to add dynamically FormControl to FormGroup

Question:

I have this <a href="https://plnkr.co/edit/sT94PRSy1yXSks6RxPhj?p=preview" rel="nofollow">plunker</a>. I am creating form components dynamically, based on model (defined in app.ts), and cannot add

formControlName = "name"

to the component. In the control-factory.directive.ts I add

this.form.addControl(this.model.name, new FormControl());,

but how can I bind the value?

Answer1:

To keep form value in sync with your custom model i would subscribe to control.valueChanges

let control = new FormControl(this.model.data); control.valueChanges.subscribe(x => { this.model.data = x; }); this.form.addControl(this.model.name, control);

to keep in sync form model and view i would bind FormControl to reactive directive i.e. formControl

<strong>datepicker.component.html</strong>

<input [formControl]="form.get(model.name)">

<strong><a href="https://plnkr.co/edit/cHis6CGClUvhI7PjDxgO?p=preview" rel="nofollow">Modified Plunker</a></strong>

Recommend

  • control.setParent is not a function when dymanically creating formGroup
  • A complete example of how to use xbmcgui.ControlSlider with actions
  • dynamically addControl to formgroup Angular 5
  • Protractor tests failing in second run for ng-reflect attribute
  • Directive to disable Cut, Copy and Paste function for textbox using Angular2
  • Angular2 How to pass selected value to other component
  • How can we set the default value of radio button in angular 2
  • What is the dash (“-”) when used with pipe (“|”) in CMD?
  • How to add a “using” statement to the System.Data.Entity namespace [closed]
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • What does the TypeScript “lib” option really do?
  • php script is parsing content from RTE (tt_news) but internal links are not appearing as speaking ur
  • Angular2 - Template reference inside NgSwitch
  • CERN ROOT exporting data to plain text
  • Set focus to first invalid form element in AngularJS
  • Regex to match a string not followed by anything
  • Symfony 2. CSRF token is invalid
  • c# open webrowser in many tab
  • Z3: Convert between FP and BitVector?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Textfile Structure (tables)
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • SplFileObject error failed to open stream: No such file or directory
  • Typescript - Unable to get 'import' statement to function
  • Recording logins for password protected directories
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Updating server-side rendering client-side
  • How can I use Kendo UI with Razor?
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • Akka Routing: Reply's send to router ends up as dead letters
  • Is there a mandatory requirement to switch app.yaml?
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • How to set the response of a form post action to a iframe source?
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • UserPrincipal.Current returns apppool on IIS