3

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.

1 respuesta 1

0

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...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.