Как скопировать значение поля ввода при установленном флажке?

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

Если вы используете класс для Address и отображаете локальный и постоянный адрес, то вы можете установить значения, когда флажок установлен.И создать экземпляр, когда флажок не установлен. См. Пример

Несколько изменений в html из-за использования ngModel и удаления элементов формы.

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

  }

Answer 2

Чтобы показать, как достичь своей цели, я разработал демоверсию на основе вашей, пожалуйста, проверьте ее.https://stackblitz.com/edit/angular-gcp6ng

Answer 3

Однако вы также можете использовать setValue (или в вашем случае лучше использовать patchValue, чтобы установить значение ваших полей, если это проверено. Использование метода valueChanges вернет наблюдаемое, вы можете затем patchValue, если пользователь изменяет значение послефлажок установлен.

Answer 4

Я создал еще один пример, без изменения значения модели на 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 5

Проблема в том, что вы не можете использовать 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);
  }

}