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

我有一个表单，其中有一个

本地

和一个

永久

字段。如果用户选中复选框，我想将所有本地字段复制到永久字段，或者如果用户未选中复选框，我需要清空所有永久字段

我试过这个：

---

问题是，如果在

formGroup

中使用，则无法使用

ngModel

。相反，您应该使用

formControlName

并在表单组中移动

isChecked

改变这个

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

---

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

我创建了另一个示例，不使用模型值更改方法

下面是组件的代码

ngOnInit（）{
this.addressFormGroup=this.formBuilder.group({
isSameAddress:[假]，
地区：['']，
城市：['']，
永久地区：['']，
永久城市：['']，
});
}
选中（值：布尔值）{
如果（值）{
this.addressFormGroup.controls.permanentDistrict.setValue（this.addressFormGroup.value.district）；
this.addressFormGroup.controls.permanentCity.setValue（this.addressFormGroup.value.city）
}否则{
this.addressFormGroup.controls.permanentDistrict.setValue（未定义）；
this.addressFormGroup.controls.permanentCity.setValue（未定义）
}
}

---

如果有任何疑问，请告诉我。

为了展示如何实现您的目标，我在您的基础上制作了一个演示，请查看。

---

如果您使用一个类来表示地址并映射本地和永久地址，那么您可以在选中复选框时设置值。在未选中复选框时实例化。

由于使用ngModel和删除表单元素，html中出现了一些变化

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

  }

看起来这个问题和你要找的有点相似。

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

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

}

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

  }