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

Question

我有一个表格，其中有一个local和一个permanent领域。 我想将所有本地字段复制到永久字段，如果用户选中了复选框，或者如果用户取消选中该复选框，则需要清空所有永久字段。

我试过这个： https ： //stackblitz.com/edit/angular-ypzjrk？file = ssrc％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

问题是如果在formGroup使用ngModel则无法使用formGroup 。 相反，您应该使用formControlName并在表单组中移动isChecked

改变这个

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

至

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

在你的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

我在stackblitz上创建了另一个示例示例，没有模型值更改方法

这是组件的代码。

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

有任何困惑，请告诉我。

Answer 4

为了展示如何实现您的目标，我根据您的分析了一个演示，请检查它。 https://stackblitz.com/edit/angular-gcp6ng

Answer 5

如果您使用Address类并映射本地和永久地址，则可以在选中复选框时设置值。 并且在未选中复选框时进行实例化。 见例子

由于使用了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();
     }
    }

  }