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

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

问题是如果在 formGroup 中使用它，则不能使用 ngModel。相反，您应该使用 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);
  }

}