New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(forms) support creating arrays with the template-driven-forms approach (NgModelArray?) #9615

Open
choeller opened this Issue Jun 26, 2016 · 12 comments

Comments

@choeller
Contributor

choeller commented Jun 26, 2016

I'm submitting a ... (check one with "x")

[ ] bug report
[x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Currently we are able to do:

 <div ngModelGroup="assignee">
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control"
             name="name" ngModel/>
    </div>
    <div class="form-group">
      <label>E-Mail</label>
      <input type="text" class="form-control"
             name="email" ngModel/>
    </div>
  </div>

form.value would then have an object "assignee" with the fields "name" and "email".

Currently there seems to be no way to create Arrays with a pure template-driven approach unless using two-way databinding.

Expected/desired behavior

What I would assume would be something like:

  <div ngModelArray="tags">
    <div *ngFor="let tag of form.value.tags; let i = index">
        <div ngModelGroup="i">
          <input class="form-control"
                 name="label"
                 ngModel
                 minlength="3">
         </div>
    </div>
  </div>

To create the structure

{ tags: [{label: "important"}, {label: "difficult"}]}

What is the motivation / use case for changing the behavior?

Being able to use the template-driven forms approach to create arrays without two-way databinding

Please tell us about your environment:

  • Angular version: 2.0.0-rc.3
  • Browser: [chrome]
  • Language: [TypeScript]
@choeller

This comment has been minimized.

Show comment
Hide comment
@choeller

choeller Jul 24, 2016

Contributor

@kara: Just out of curiosity: Are there plans to add a directive I described above or is this no priority at the moment? I'm still not 100% sure how a suitable solution for FormArray in template-driven-forms could look like, so it would be cool to hear your thoughts about it...

Contributor

choeller commented Jul 24, 2016

@kara: Just out of curiosity: Are there plans to add a directive I described above or is this no priority at the moment? I'm still not 100% sure how a suitable solution for FormArray in template-driven-forms could look like, so it would be cool to hear your thoughts about it...

@kara

This comment has been minimized.

Show comment
Hide comment
@kara

kara Jul 26, 2016

Contributor

@choeller Yeah, we actually wanted to build this anyway :) Unfortunately, it's a bit more complicated to build than the reactive form version because of change detection and how ngModel works. Given the time it will take and other features being higher priority, I might not get to it for a bit, but it's on the list.

Contributor

kara commented Jul 26, 2016

@choeller Yeah, we actually wanted to build this anyway :) Unfortunately, it's a bit more complicated to build than the reactive form version because of change detection and how ngModel works. Given the time it will take and other features being higher priority, I might not get to it for a bit, but it's on the list.

@princemaple

This comment has been minimized.

Show comment
Hide comment
@princemaple

princemaple Oct 11, 2016

Hi, is there any work started for this one?

princemaple commented Oct 11, 2016

Hi, is there any work started for this one?

@basherr

This comment has been minimized.

Show comment
Hide comment
@basherr

basherr Oct 25, 2016

when it gonna be done?

basherr commented Oct 25, 2016

when it gonna be done?

@xban1x

This comment has been minimized.

Show comment
Hide comment
@xban1x

xban1x Nov 9, 2016

This, is a real issue on template-driven forms as we need to hack the validators.

xban1x commented Nov 9, 2016

This, is a real issue on template-driven forms as we need to hack the validators.

@hugocalheira

This comment has been minimized.

Show comment
Hide comment
@hugocalheira

hugocalheira May 16, 2017

It would be very helpful!

hugocalheira commented May 16, 2017

It would be very helpful!

@danielfigueiredo

This comment has been minimized.

Show comment
Hide comment
@danielfigueiredo

danielfigueiredo May 18, 2017

Would be awesome to have this last missing piece!

danielfigueiredo commented May 18, 2017

Would be awesome to have this last missing piece!

@myagoo

This comment has been minimized.

Show comment
Hide comment
@myagoo

myagoo Aug 9, 2017

I miss this feature too :O

myagoo commented Aug 9, 2017

I miss this feature too :O

@psingl

This comment has been minimized.

Show comment
Hide comment
@psingl

psingl Aug 30, 2017

Is this feature now added in version 4.3.x or not? I am missing this feature too. Please add as soon as possible.

psingl commented Aug 30, 2017

Is this feature now added in version 4.3.x or not? I am missing this feature too. Please add as soon as possible.

@psingl

This comment has been minimized.

Show comment
Hide comment
@psingl

psingl Aug 30, 2017

At the moment does anyone knows an alternative to this. How can we do this now, in what ways this can be done? Any help would really be appreciated. Please respond soon.

psingl commented Aug 30, 2017

At the moment does anyone knows an alternative to this. How can we do this now, in what ways this can be done? Any help would really be appreciated. Please respond soon.

@phenomnomnominal

This comment has been minimized.

Show comment
Hide comment
@phenomnomnominal

phenomnomnominal Oct 20, 2017

I'd be keen for an official implementation of this too. I guess for now you could just make the name of the inputs the array index, and then use Array.from, but that's fairly gross 😄

phenomnomnominal commented Oct 20, 2017

I'd be keen for an official implementation of this too. I guess for now you could just make the name of the inputs the array index, and then use Array.from, but that's fairly gross 😄

@dannyzhan

This comment has been minimized.

Show comment
Hide comment
@dannyzhan

dannyzhan Dec 25, 2017

I need this feature too.
like what @phenomnomnominal said, the only way is add the index to the name of the inputs and update the dirty/touch state manually when the array is pushed/spliced.

dannyzhan commented Dec 25, 2017

I need this feature too.
like what @phenomnomnominal said, the only way is add the index to the name of the inputs and update the dirty/touch state manually when the array is pushed/spliced.

@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment