How pass all values of a form controls to another form when checkbox is selected?

Question

I got in form #1: Input and select. and in the form #2 the same fields and the checkbox. How pass the values of the form #1 to the form #2 when i clicked the checkbox?

HTML code:

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required>
  <mat-error *ngIf= "f?.names?.errors?.required"> 
    Name field empty or not valid, please check 
  </mat-error>
</mat-form-field>

<mat-form-field>
  <mat-label>Provincia </mat-label>
  <mat-select formControlName="province" required>
    <mat-option *ngFor="let p of provincies" [value]=p?.locationCode>{{p.locationName}}</mat-option>
  </mat-select>
</mat-form-field>

Checkbox on form #2:

<mat-checkbox>Same info?</mat-checkbox>

you can use document.forms and it will return you an array with all the forms in the view. — assembler
– assembler, Commented Jan 23, 2019 at 20:51

G. Tranter · Accepted Answer · 2019-01-23 21:35:13Z

1

If you want to do this generically without concern for whether the forms are identical or how many controls there may be or if there are nested form groups or form arrays, you can copy values based on common control names and use recursion:

HTML

<form [formGroup]="form1">...</form>

<form [formGroup]="form2">
  <mat-checkbox (change)="$event.checked ? copyValues(form1, form2) : {}">Copy</mat-checkbox>
  ...
</form>

TS

form1: FormGroup;
form2: FormGroup;
...
copyValues(src: FormGroup, dest: FormGroup) {
  Object.keys(src.controls).forEach((key: string) => {
    const destControl = dest.get(key);
    if (destControl) {
      if (destControl instanceof FormGroup || destControl instanceof FormArray) {
        this.copyValues(src.get(key), destControl);
      } else {
        destControl.setValue(src.get(key).value);
      }
    }
  });
}

Note that I didn't implement any handling for an un-check action - whether to clear the form or do something else is up to you.

answered Jan 23, 2019 at 21:35

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

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

1 Comment

FelixAVeras Over a year ago

Thanks too much! that's work for me. Muchas Gracias!

Fahad Subzwari · Accepted Answer · 2019-01-23 20:54:55Z

0

There are couple of ways to do this.

One method is to use service.

Make an angular service and make get and set function like this

 // declare global variable in service
data : any;

 // function to set form-1 data
public setFormData(formData){
  this.data = formData;
}

// function to get form-1 data
public getFormData(){
  return this.data;
}

In your form-1 component call setFormData function on formSubmit like this

onSubmit(){
   this.myService.setFormData(this.MyForm.value);
}

And in your form-2 component call getFormData in ngOnInit

ngOnInit(){
    this.form1Data = this.myService.getFormData();
}

answered Jan 23, 2019 at 20:54

Fahad Subzwari

2,3853 gold badges31 silver badges63 bronze badges

Comments

N.Tasikj · Accepted Answer · 2019-01-23 21:07:02Z

First add template variables to your inputs in first form:

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required #nameVar>
  <mat-error *ngIf= "f?.names?.errors?.required"> 
    Name field empty or not valid, please check 
  </mat-error>
</mat-form-field>

<mat-form-field>
  <mat-label>Provincia </mat-label>
  <mat-select formControlName="province" required>
    <mat-option *ngFor="let p of provincies" [value]=p?.locationCode>{{p.locationName}} #optionVar></mat-option>
  </mat-select>
</mat-form-field>

Then you can make some function on change value in checkbox and pass values, for example:

<mat-checkbox (change)="test($event, nameVar.value, optionVar.value)">Same info?</mat-checkbox>

then in controller fetch your values, for example in your controller:

test(event, name, option) {
    console.log(event.checked, name, option);
}

Collectives™ on Stack Overflow

How pass all values of a form controls to another form when checkbox is selected?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related