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">×</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
</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;
}