Question

我有一个表单，其中有一个local和一个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);
  }

}

Answer 1

问题是，如果您在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方法将返回一个可观察到的值，如果用户在操作后更改了值，则可以使用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

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

由于使用ngModel并删除了表单元素，因此对html进行了一些更改。

//If you just want to set the text
ActionBar actBar = getSupportActionBar();
if(actBar != null) {
    actBar.setTitle(R.string.your_ab_title);
}

//If you want to customize more than the text    
Toolbar ab = findViewById(R.id.action_bar);
if(ab != null){
    for (int i= 0; i < ab.getChildCount(); i++){
        View child = ab.getChildAt(i);
        if(child instanceof TextView) {
            //You now have the title textView. Do something with it
        }
     }
}

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

5 个答案: