选中复选框时如何复制输入字段值？

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);
  }

}

Answer 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);
  }

}

Answer 2

但是你也可以使用setValue（或者在你的情况下更好地使用patchValue，如果选中了，你可以设置字段的值。使用valueChanges方法将返回一个observable，如果用户在单击复选框后更改了值，则可以使用patchValue 。

Answer 3

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.

Answer 4

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

Answer 5

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();
     }
    }

  }