1

Consigo guardar los datos del formulario que incluye botones de radio para indicar valores de una determinada variable...pero no consigo cargarlos de entrada, nada más abrir el cuadro de diálogo, de manera que el usuario pueda ver qué valores almacena el objeto en la base de datos.

El problema de esta situación es que sólo puedo guardar datos en el modelo de situación, pero no puedo actualizar lo hay en la db en la pantalla. Para más información, he añadido el código implicado.

¿Hay alguna manera de actualizar los valores de los radio buttons nada más abrir el cuadro de diálogo?

El componente:

<div class="modal-header">
  <h4 class="modal-title pull-left">Edita situations</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form [formGroup]="registerSituation_modal">
    <div class="form-group small">
      <label class="font-weight-bold" style="margin-right:10px">Level of improvement requested: </label>
      <br>
      <label class="radio-inline">
        <input class="mr-1" type="radio" value="0" formControlName="item1">0&nbsp;&nbsp;&nbsp;&nbsp;
      </label>
       <label class="radio-inline">
         <input class="mr-1" type="radio" value="20" formControlName="item1">20
       </label>
       <label class="radio-inline ml-3">
         <input class="mr-1" type="radio" value="40" formControlName="item1">40
       </label>
       <label class="radio-inline ml-3">
        <input class="mr-1" type="radio" value="60" formControlName="item1">60
      </label>
      <label class="radio-inline ml-3">
        <input class="mr-1" type="radio" value="80" formControlName="item1">80
      </label>
      <label class="radio-inline ml-3">
        <input class="mr-1" type="radio" value="100" formControlName="item1">100
      </label>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" (click)="bsModalRef.hide()">Cancel</button>
  <button type="button" class="btn btn-success" (click)="updateSituation()">Send</button>
</div>

Su typescript:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { User } from 'src/app/_models/user';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Situation } from '../../_models/situation';
import { SituationsService } from 'src/app/_services/situations.service';
import { AlertifyService } from 'src/app/_services/alertify.service';

@Component({
  selector: 'app-situation-modal',
  templateUrl: './situation-modal.component.html',
  styleUrls: ['./situation-modal.component.scss']
})
export class SituationModalComponent implements OnInit {

  registerSituation_modal: FormGroup;
  situation: Situation;

  constructor(public bsModalRef: BsModalRef,
              private fb: FormBuilder,
              private situationsService: SituationsService,
              private alertify: AlertifyService) { }

  ngOnInit() {
    this.createRegisterForm();
  }

  createRegisterForm() {
    console.log(this.situation);
    this.registerSituation_modal = this.fb.group({
      id: this.situation.id,
      description: this.situation.description,
      isMain: this.situation.isMain,
      userId: this.situation.userId,
      isApproved: this.situation.isApproved,    
      item1: this.situation.item1,
      item2: this.situation.item2,
      item3: this.situation.item3,
      item4: this.situation.item4,
      item5: this.situation.item5,
      item6: this.situation.item6,
      item7: this.situation.item7,
      item8: this.situation.item8,
      item9: this.situation.item9,
      item10: this.situation.item10,
      item11: this.situation.item11,
      item12: this.situation.item12,
      item13: this.situation.item13,
      item14: this.situation.item14,
      item15: this.situation.item15,
      item16: this.situation.item16,
      item17: this.situation.item17,
      item18: this.situation.item18,
      item19: this.situation.item19,
      item20: this.situation.item20,
    });
  }

  updateSituation() {
    const situation = this.registerSituation_modal.value;
    this.situationesService.updateSituation(situation).subscribe(
      respuestaServidor => {
        this.alertify.success('Edition registered);
        this.bsModalRef.hide();
      },
      error => {
        console.log(error);
        this.alertify.error('DB write error');
      }

    );
  }

  loadSituationItems() {
    const situationprev = this.registerSituation_modal.value;
    this.situationesService.getSituation(this.situation.id).subscribe(
      respuestaServidor => {
        this.situation.item1 = 20;
      },
    error => {
      console.log(error);
    }
    )};


}

El servicio al que llama:

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { HttpClient } from '../../../node_modules/@angular/common/http';
import { Situation } from '../_models/situation';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SituationsService {
  baseUrl = environment.apiUrl;

constructor(private http: HttpClient) { }

getSituation(id: number): Observable<Situation> {
  return this.http.get<Situation>(this.baseUrl + 'situation/' + id);
}

getSituations(userId: number): Observable<Situation[]> {
  return this.http.get<Situation[]>(this.baseUrl + 'situation/all/' + userId);
}

addSituation(situation) {
  return this.http.post(this.baseUrl + 'situation', situation);
}

getAllSituationes(): Observable<Situation[]> {
  return this.http.get<Situation[]>(this.baseUrl + 'situation/todo/');
}

updateSituation(situation: Situation) {
    return this.http
      .put(
        this.baseUrl + 'situation/' + situation.id, situation);
  }

approveSituation2(id: number) {
  return this.http.post(this.baseUrl + 'admin/approvePhoto' + id, {
    "id": id,
    "isApproved": true,
  });
}

rejectSituation(id: number) {
  return this.http
  .put(
    this.baseUrl + 'situation/' + id,
    {
      "id": id,
      "isApproved": false,
    }
  );
}

El modelo:

export interface SituationPendiente {
    id?: number;
    description: string;
    isMain: boolean;
    userId: number;
    isApproved: number;
    item1: number;
    item2: number;
    item3: number;
    item4: number;
    item5: number;
    item6: number;
    item7: number;
    item8: number;
    item9: number;
    item10: number;
    item11: number;
    item12: number;
    item13: number;
    item14: number;
    item15: number;
    item16: number;
    item17: number;
    item18: number;
    item19: number;
    item20: number;
}

export interface Situation {

    id: number;
    description: string;
    isMain: boolean;
    userId: number;
    isApproved: number;
    item1: number;
    item2: number;
    item3: number;
    item4: number;
    item5: number;
    item6: number;
    item7: number;
    item8: number;
    item9: number;
    item10: number;
    item11: number;
    item12: number;
    item13: number;
    item14: number;
    item15: number;
    item16: number;
    item17: number;
    item18: number;
    item19: number;
    item20: number;
}

2 respuestas 2

1

la clase de FormGroup tiene muchos métodos que te pueden ser útiles, puedes verificarlo aquí: https://angular.io/api/forms/FormGroup

Entre estos métodos hay varios que se pude servir para tu problema y es .setValue() .patchValue() .reset() para setear valores.

El que mejor se ajuste a tu caso es el que puedes poner en el método que traiga la respuesta de tu api con la data para mostrar.

  1. .setValue()

Este te sirve si necesitas setear todos los valores del objeto del FormGroup, si falta algún valor fallara, Ej:

this.registerSituation_modal.setValue({
     // Todos los valores del FormControl 
     id: this.situation.id,description: "", 
     isMain: false, 
     userId: 999, 
     isApproved: 232, 
     item1: 1,
     item2: 2
     ...
})
  1. .patchValue()

Este te sirve si necesitas setear parcialmente los valores del objeto del FormGroup Ej:

this.registerSituation_modal.setValue({
     // Solo los valores del FormControl que quieras cambiar 
     isApproved: 232
})
  1. .reset()

Este te sirve si necesitas setear todos los valores del objeto del FormGroup y además poner el formulario en su estado inicial , donde las propiedades .dirty entre otras propiedades y validadores vuelven a su estado inicial. Ej:

this.registerSituation_modal.reset({
     // todos los valores del FormControl que quieras cambiar 
     id: this.situation.id,description: "", 
     isMain: false, 
     userId: 999, 
     isApproved: 232, 
     item1: 1,
     item2: 2
     ...
})

Extra

En la creación del formulario puedes generarlo vacío para que no te cause problemas con propiedades indefinidas Ej:

this.fb.group({
    // El primer valor son los valores por defecto y el segundo son los validadores [ 'valor por defecto' , Validators.required  ]
    item1: [null, null]
    item2: [null, null]
    ...
})

y luego saetearlo con los métodos de arriba.

EL .reset() puede ser enviado vacío para reiniciar el formulario Ej:

this.registerSituation_modal.reset()

todos los métodos anteriores reciben dos parámetros .setValue(x, y)

x = {
         id: this.situation.id,description: "", 
         isMain: false, 
         userId: 999, 
         isApproved: 232, 
         item1: 1,
         item2: 2
         ...
}

// y es opcional no es necesario que la pases en ningún método 

y = { 
        onlySelf?: boolean; 
        emitEvent?: boolean; 
        emitModelToViewChange?: boolean; 
        emitViewToModelChange?: boolean; 
}

y controla cuando se disparan eventos en el FormControl o el FormGroup para y los valores por defecto pueden cambiar según el método para mas información de estos revisa la documentación (https://angular.io/api/forms/FormGroup)

1

Debes de crear el formulario hasta que hayas cargado los datos.

Estoy suponiendo que en esta función se obtiene this.situation

loadSituationItems() {
   const situationprev = this.registerSituation_modal.value;
   this.situationesService.getSituation(this.situation.id).subscribe(
     respuestaServidor => {
       this.situation = respuestaServidor;
       //Ahora si, ya que estas seguro que resiviste tus datos, creas el formulario:
       this.createRegisterForm()
       
       this.situation.item1 = 20;
     },
   error => {
     console.log(error);
   }
   )};

Esto te va a mandar un error de que no has definido un formControl para tu formulario, asi que es necesario que no muestres el form hasta que haya datos validos. Lo puedes hacer asi

 <form 
  [formGroup]="registerSituation_modal"
  *ngIf="situation"
> ....</form>

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.