How to copy input field value when checkbox is checked?

Question

I have a form in which there is a local and a permanent field. I want to copy all local fields to the permanent field if the user checked the checkbox, or if the user unchecked the checkbox I need to blank all the permanent fields.

I tried this: https://stackblitz.com/edit/angular-ypzjrk?file=src%2Fapp%2Fapp.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    cf: FormGroup;
    isChecked:boolean;
constructor(private fb: FormBuilder){
  this.isChecked = false;
  this.cf = this.fb.group({
          district: [''],
           city: [''],
          permanentDistrict: [''],
          permanentCity: [''],

  })


}
checkValue(){
    alert(this.isChecked);
  }

}

stackoverflow.com/questions/52504991/… seems like this question has something similar to what you are looking for. — Pari Baker
– Pari Baker, Commented Oct 21, 2018 at 5:04

Nhut Dinh Ba · Accepted Answer · 2018-10-21 05:15:14Z

1

The problem is you cannot use ngModel if you using it inside formGroup. Instead you should use formControlName and move isChecked in side the form group

Change this

<input type="checkbox" value="" class="" [(ngModel)]="isChecked" (change)="checkValue(isChecked)">

to

<input type="checkbox" value="" class="" formControlName="isChecked" (change)="checkValue(isChecked)">

and in your ts

export class AppComponent  {
  name = 'Angular';
    cf: FormGroup;
  constructor(private fb: FormBuilder){
    this.cf = this.fb.group({
          district: [''],
           city: [''],
          permanentDistrict: [''],
          permanentCity: [''],
          isChecked: false

  })


}
checkValue(){
    console.log(this.cf.value.isChecked);
  }

}

answered Oct 21, 2018 at 5:15

Nhut Dinh Ba

3541 silver badge6 bronze badges

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

Comments

Deng Zhebin · Accepted Answer · 2018-10-21 05:36:40Z

1

To show how to accomplish your aim , I forked a demo based on yours , please check it. https://stackblitz.com/edit/angular-gcp6ng

answered Oct 21, 2018 at 5:36

Deng Zhebin

1,2621 gold badge10 silver badges17 bronze badges

Comments

Ajay Ojha · Accepted Answer · 2018-10-21 05:33:56Z

I have created another sample example, without model value changes approach on stackblitz

Here is the code of component.

 ngOnInit(){
    this.addressFormGroup = this.formBuilder.group({
          isSameAddress:[false],
          district: [''],
          city: [''],
          permanentDistrict: [''],
          permanentCity: [''],
    });
  }

  checked(value:boolean){
    if(value){
      this.addressFormGroup.controls.permanentDistrict.setValue(this.addressFormGroup.value.district);
      this.addressFormGroup.controls.permanentCity.setValue(this.addressFormGroup.value.city)
    }else{
      this.addressFormGroup.controls.permanentDistrict.setValue(undefined);
      this.addressFormGroup.controls.permanentCity.setValue(undefined)
    }
  }

Any confusion, please let me know.

Pari Baker · Accepted Answer · 2018-10-21 05:17:38Z

0

However you could also use setValue(or in your case better use patchValue, to set the value of your fields if that is checked. using the valueChanges method will return an observable you can then patchValue if the user changes a value after the checkbox is clicked.

answered Oct 21, 2018 at 5:17

Pari Baker

7165 silver badges21 bronze badges

Comments

Mahbub Moon · Accepted Answer · 2018-10-21 06:50:11Z

If you use a class for Address and map local and permanent address, then you can set values when checkbox is checked. And instantiate when checkbox is not checked. See example

A few changes in html due to use of ngModel and removing form elements.

interface address{
  district?,
  city?
}
class addressInfo implements address{
  constructor(
    public district?: string,
    public city?: string
) { }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  cf: FormGroup;
  isChecked:boolean;
  localAddress: address = new addressInfo();
  permanentAddress: address = new addressInfo();

  constructor(){
    this.isChecked = false;
  }
  checkValue(){
  //alert(this.isChecked);
     if(this.isChecked){
       this.permanentAddress = this.localAddress;
       console.log(this.permanentAddress);
     }
     else{
       this.permanentAddress = new addressInfo();
     }
    }

  }

Collectives™ on Stack Overflow

How to copy input field value when checkbox is checked?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related