代码之家 › 专栏 › 技术社区 › user944513

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

angular javascript

3

user944513 · 技术社区 · 7 年前

我有一张表格,里面有 local 和A permanent 字段。如果用户选中该复选框,或者如果用户未选中该复选框,我希望将所有本地字段复制到永久字段,我需要清空所有永久字段。

我试过这个: 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);
  }

}

5 回复 | 直到 7 年前

1

0

Ajay Ojha 7 年前

我已经创建了另一个示例,在 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)
    }
  }

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

2

0

Nhut Dinh Ba 7 年前

问题是你不能用 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);
  }

}

3

0

Pari Baker 7 年前

但是,您也可以使用setValue(或者在您的情况下,最好使用patchValue)来设置字段的值(如果选中)。使用ValueChanges方法将返回一个Observable,如果用户在单击复选框后更改了某个值,则可以对其进行修补。

4

0

Deng Zhebin 7 年前

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

5

0

Mahbub Moon 7 年前

如果将类用于地址并映射本地和永久地址,则选中复选框时可以设置值。并在未选中复选框时实例化。 See example

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

  }