TransWikia.com

Control de FormGroup dentro de otra plantilla en Angular

Stack Overflow en español Asked by Valeria Álvarez on January 23, 2021

Tengo un modal en Angular 9, que muestra un formulario reactivo:

El formulario tiene varios campos, pero muestro en el que tengo duda ya que está un poco extenso.

<ng-template #createEvent>
  <div class="customerModal">
    <!-- Modal Body-->
    <form *ngIf="!buttonAdd" [formGroup]="createEventForm" (ngSubmit)="createEventForm.valid && onCreateEventIn()" novalidate="">
      <div class="content-modal">
        <div class="row">
          <div class="col-5">
            <button type="button" class="inputs" placement="top" autoClose="outside" [ngbPopover]="popContent"  popoverTitle="Select a Map">
              {{ 'Select Map' | translate }}
            </button>
          </div>
        </div>
        <div class="col-5">
            <input class="btnAdd float-right" name="btnAdd" type="submit" value="{{'Create' | translate}}" [disabled]="!createEventForm.valid">
        </div>
      </div>
    </form>    
  </div>
</ng-template>

Cuando hago click en el botón "Select Map" se abre un PopOver que dentro debe contener unos radio button con imágenes, y el valor del radio button que se elija debe ser parte del form, pero no sé cómo decirle que ese valor será parte de él.

Este es el código de la plantilla del popOver:

 <ng-template #popContent>
  <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group">
    <mat-radio-button class="example-radio-button" [value]="1">
      <img src="http://placehold.it/350x150/e8117f/fff" width="50px" height="70px" alt="Image 1">
    </mat-radio-button>
    <mat-radio-button class="example-radio-button" [value]="2">
      <img src="http://placehold.it/350x150/f9a82f/fff" width="50px" height="70px" alt="Image 1">     
    </mat-radio-button>
    <mat-radio-button class="example-radio-button" [value]="3">
      <img src="http://placehold.it/350x150/49aed7/fff" width="50px" height="70px" alt="Image 1">
    </mat-radio-button>
  </mat-radio-group>
</ng-template>

Y bueno, este sería el código typescript del formulario:

@ViewChild('createEvent') createEventTemplate: TemplateRef<any>;

  createValidatorsEventForm() {
    this.createEventForm = this.formBuilder.group({
      serie: ['', Validators.required],
      title: ['', Validators.required],
      eventDate: ['', Validators.required],
      startTime: ['', Validators.required],
      image: ['', Validators.required],
      imageSlider: ['', Validators.required],
      customerId: this.customerId,
      user: this.tokenStorage.getUser().username,
      map: ['']
    });
  }

Espero me puedan ayudar, gracias.

One Answer

Al no tener un código de ejemplo presupongo que todo está dentro del mismo componente.

La manera más sencilla de lograr lo que pides es agregando el evento (change) a los mat-radio-button


<mat-radio-button class="example-radio-button" [value]="3"
(change)="setearValor(3)"
>
      <img src="http://placehold.it/350x150/49aed7/fff" width="50px" height="70px" alt="Image 1">
    </mat-radio-button>

Y en tu componente solo agregarias lo siguiente:

setearValor(valor){

  this.createEventForm.get("elCampoDelFormuario).setValue(valor)
}

El codigo esta echo sobre la marcha y puede contener errores ...editando...

Answered by Legna on January 23, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP