How to push input values into an array

Question

HTML:

<span *ngFor="let cust of customs">
   <div  class="custominfobackground col-sm-12">
    <input type="email" id="widget-subscribe-form-email" name="cust{{$index}}" class="form-control required email" [formControl]="form.controls['custominfo']" 
         [(ngModel)] = "cust.value" [ngClass]="{ active: submitted && !form.controls['custominfo'].valid}"  placeholder="Facebook" aria-required="true">
   </div>
</span>

TypeScript:

export class Custom {
  customs:any = [];

  constructor(fbld: FormBuilder, http: Http) {
    this.form = fbld.group({
        custominfo: ['',Validators.required],

    });
  }

  showCustomInfo(){
   this.customs.push("");
  }
}

When i click on add button a new input is appending but the same values i entered for first input is appering for the second input also .Can anyone please help me.Thanks.

Is there a reason why you have mixed form controls and ngmodel? — AVJT82
– AVJT82, Commented Mar 1, 2017 at 11:27
@Daniel Okay, but why not make use of formcontrols then for validation, since you are already using them :) — AVJT82
– AVJT82, Commented Mar 1, 2017 at 11:30

mickdev · Accepted Answer · 2017-03-01 11:47:56Z

1

It's unclear what you're trying to do. You are mixing template driven and model driven forms (Reactive form)... You have to make a choice. The answer to your question will depend on that.

Template driven

<input type="email" (click)="showCustomInfo($event)">
showCustomInfo($event){
   this.customs.push($event.value);
}

Modeldriven

this.yourForm.get('yourInput').valueChanges
    .subscribe(data => {
      //do what you want with your data here
      }
    })

answered Mar 1, 2017 at 11:47

mickdev

2,88514 silver badges16 bronze badges

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

Comments

AVJT82 · Accepted Answer · 2017-03-01 13:11:59Z

If you want to go the route of model driven forms, here's a sample for that. BUT if you have a simple form, using model driven forms might be overkill. But, if you have a complex form, this would be a good option.

Here I have form:

<form [formGroup]="myForm">
<button (click)="addCustomer()">Add Customer</button>
<div formArrayName="customers">
  <div *ngFor="let cust of myForm.controls.customers.controls; let i = index" >
    <div formGroupName="{{i}}">
    <p>Customer {{i+1}}</p>
      <label>E-mail</label>
      <input formControlName="email" />
      <span *ngIf="!myForm.controls.customers.controls[i].controls.email.valid">Required!</span>
    </div>
    <hr>
  </div>
</div>
<button type="submit">Submit</button>
</form>

But if you have many several different validations for one and the same form control, I would go ahead and use the latter suggestion by mickdev, where you can capture changes and do check the validations and display the correct validation message. E.g, check first that user has entered an email, and after that check if the email is a valid e-mail etc. But if you just have a couple of form validations you can of course check those errors directly in the template. This is a pretty good link, explaining reactive forms and the validations, basically what I have presented here in code.

Here would be the TS file to above form, where customers would be an formarray where you can push new formcontrols:

this.myForm = this.fb.group({
  customers: this.fb.array([
    this.initCustomers()
  ])
});

initCustomers() {
  return this.fb.group({
    email: ['', Validators.required]
  })
}

addCustomer() {
  const control = <FormArray>this.myForm.controls['customers'];
  control.push(this.initCustomers())
}

Here's a demo plunker with the above code

Collectives™ on Stack Overflow

How to push input values into an array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related