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

Question

Я получил в форме № 1: введите и выберите. и в форме № 2 те же поля и флажок. Как передать значения формы № 1 в форму № 2, когда я установил флажок?

HTML код:

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required>
  <mat-error *ngIf= "f?.names?.errors?.required"> 
    Name field empty or not valid, please check 
  </mat-error>
</mat-form-field>

<mat-form-field>
  <mat-label>Provincia </mat-label>
  <mat-select formControlName="province" required>
    <mat-option *ngFor="let p of provincies" [value]=p?.locationCode>{{p.locationName}}</mat-option>
  </mat-select>
</mat-form-field>

Флажок в форме № 2:

<mat-checkbox>Same info?</mat-checkbox>

Answer 1

Сначала добавьте переменные шаблона к своим входам в первой форме:

<mat-form-field>
  <input matInput placeholder="Nombre" formControlName="names" required #nameVar>
  <mat-error *ngIf= "f?.names?.errors?.required"> 
    Name field empty or not valid, please check 
  </mat-error>
</mat-form-field>

<mat-form-field>
  <mat-label>Provincia </mat-label>
  <mat-select formControlName="province" required>
    <mat-option *ngFor="let p of provincies" [value]=p?.locationCode>{{p.locationName}} #optionVar></mat-option>
  </mat-select>
</mat-form-field>

Затем вы можете сделать некоторую функцию для изменения значения в флажке и передать значения, например:

<mat-checkbox (change)="test($event, nameVar.value, optionVar.value)">Same info?</mat-checkbox>

затем в контроллере получите ваши значения, например, в вашем контроллере:

test(event, name, option) {
    console.log(event.checked, name, option);
}

Answer 2

Если вы хотите сделать это в общем, не заботясь о том, идентичны ли формы или сколько элементов управления может быть, или если есть вложенные группы форм или массивы форм, вы можете скопировать значения на основе имен общих элементов управления и использовать рекурсию:

HTML

<form [formGroup]="form1">...</form>

<form [formGroup]="form2">
  <mat-checkbox (change)="$event.checked ? copyValues(form1, form2) : {}">Copy</mat-checkbox>
  ...
</form>

TS

form1: FormGroup;
form2: FormGroup;
...
copyValues(src: FormGroup, dest: FormGroup) {
  Object.keys(src.controls).forEach((key: string) => {
    const destControl = dest.get(key);
    if (destControl) {
      if (destControl instanceof FormGroup || destControl instanceof FormArray) {
        this.copyValues(src.get(key), destControl);
      } else {
        destControl.setValue(src.get(key).value);
      }
    }
  });
}

Обратите внимание, что я не реализовал никакой обработки для неконтролируемого действия - очистить ли форму или сделать что-то еще, зависит только от вас.

Answer 3

Есть несколько способов сделать это.

Одним из способов является использование сервиса.

Создайте угловую службу и сделайте так, чтобы функции get и set были такими:

 // declare global variable in service
data : any;

 // function to set form-1 data
public setFormData(formData){
  this.data = formData;
}

// function to get form-1 data
public getFormData(){
  return this.data;
}

При вызове компонента form-1 setFormData функция в formSubmit выглядит следующим образом

onSubmit(){
   this.myService.setFormData(this.MyForm.value);
}

И в вашем компоненте формы-2 вызов getFormData в ngOnInit

ngOnInit(){
    this.form1Data = this.myService.getFormData();
}