I have a problem in set data from object to fromgroup file TS
import { Component, Inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DemandeConges } from 'src/app/models/ui-models/Demande_Conges';
import { CongesService } from '../../conges.service';
import { FormBuilder, FormGroup, RequiredValidator, Validators } from '@angular/forms';
@Component({
selector: 'app-print',
templateUrl: './print.component.html',
styleUrls: ['./print.component.scss']
})
export class PrintComponent implements OnInit {
show: boolean = false;
url: string='';
report: string='';
AllDemande: any=[];
private id: number=0;
private sub: any;
errorMsg: String='';
isRequestEdit = false;
selectedLeaveRequest!: DemandeConges;
isLeaveRequestSelected = false;
selected_leave_msg: String='';
requestApproveForm !: FormGroup;
has_error = false;
approve_leave_update_msg: String='';
submitted = false;
demandeCongeId:string|null|undefined;
Demandes: any=[];
constructor(private readonly congeService:CongesService,private formBuilder: FormBuilder,
private readonly route: ActivatedRoute) {
}
ngOnInit(): void {
this.route.paramMap.subscribe(
(params) => {
this.demandeCongeId=params.get('id');
if(this.demandeCongeId){
this.congeService.DemandeConge(this.demandeCongeId)
.subscribe(
(successResponse)=> {
this.AllDemande=successResponse
this.Demandes=successResponse
console.log(this.AllDemande);
console.log(this.Demandes.id)
});
} });
}
}
initRequestApproveForm() {
this.requestApproveForm = this.formBuilder.group({
Id: [this.demandeCongeId],
reason: [this.AllDemande.Reason],
status: [this.AllDemande.status, Validators.required],
});
// this.requestApproveForm.get('alternate')?.patchValue(this.Demandes.alternate);
//this.requestApproveForm.controls["alternate"].setValue(this.AllDemande.get('alternate'))
// this.requestApproveForm.controls['alternate'].patchValue(122);
// this.requestApproveForm.patchValue({ alternate: this.AllDemande.id });
// this.requestApproveForm.controls['alternate'].setValue(this.AllDemande.reason);
console.log(this.AllDemande)
console.log(this.requestApproveForm.value)
}
toggleEdit() {
this.isRequestEdit = !this.isRequestEdit;
this.initRequestApproveForm();
}
get f() { return this.requestApproveForm.controls; }
onSubmit(){
console.log(this.requestApproveForm.value)
this.submitted = true;
// stop here if form is invalid
if (this.requestApproveForm.invalid) {
return;
}
console.log('success ', this.requestApproveForm.value);
// this.requestApproveForm.patchValue({
// leaveId
// });
this.congeService.updateDemandeConges(this.demandeCongeId,this.requestApproveForm.value).subscribe(res => {
this.has_error = false;
this.approve_leave_update_msg = 'Successfully Submitted';
this.requestApproveForm.reset();
this.AllDemande=res;
this.submitted = false;
})
}
}
function for submit form
onSubmit(){
this.congeService.updateDemandeConges(this.demandeCongeId,this.requestApproveForm.value).subscribe(res => {
this.has_error = false;
this.approve_leave_update_msg = 'Successfully Submitted';
this.requestApproveForm.reset();
this.AllDemande=res;
this.submitted = false;
})
file HTML
<div >
<div >
<div >
<div >
<h5><span >
<a routerLink="/home/employees/details/">
</a>
</span>
</h5>
<h1 >Nom et Prénom : {{item.employeeNom}} {{item.employeePrenom}} </h1>
<h3>Date de la Demande :{{item.created_AT|date:'dd-MM-yyyy'}} <span></span></h3>
</div>
</div>
</div>
<div >
<button (click)="toggleEdit()">
{{isRequestEdit ? "Afficher la Demande" : "Approbation de la demande"}}
</button>
</div>
<div mat-tab-nav-bar >
<a mat-tab-link >Info</a>
</div>
</div>
<div >
<div >
<div >
<h3 >LeaveRequest Id : {{item.id}} </h3>
<h3 >Employee : {{item.employeeNom}} {{item.employeePrenom}} </h3>
<h3 >Type de Congé : {{item.typeCongesId}} </h3>
<h3 >Nombre des jours : {{item.nmbJours}} Jours</h3>
<h3 >Date début du congé : {{item.from_Date|date:'dd-MM-yyyy'}}</h3>
<h3 >Date Fin du congé : {{item.to_Date|date:'dd-MM-yyyy'}} </h3>
<h3 >Status :{{item.status}}</h3>
<h3 FormControlName="alternate">Alternative :{{item.alternate}}</h3>
<h3 >Coordonnées :{{item.details}}</h3>
</div>
<button (click)="Clicked(item.id)">Télécharger la Demande</button>
<div *ngIf="show">
<iframe id="report" height="1000" width="10" [src]="url | safeUrl"></iframe>
</div>
</div>
<div >
<div style="height: 360px;">
<div ></div>
</div>
</div>
<div >
<div *ngIf="isRequestEdit" >
<form [formGroup]="requestApproveForm" (ngSubmit)="onSubmit()" >
<!-- <div *ngIf="!!approve_leave_update_msg" [ngClass]="has_error ? 'alert alert-danger': 'alert alert-info'">{{approve_leave_update_msg}}</div> -->
<h5 > Approve Request </h5>
<div >
<label for="status" >Status <span >* </span></label>
<div >
<mat-radio-group id="status" formControlName="status" >
<mat-radio-button value="APPROUVÉ">APPROUVÉ</mat-radio-button>
<mat-radio-button value="REFUSÉ">REFUSÉ</mat-radio-button>
</mat-radio-group>
</div>
</div>
<div >
<label for="reason" >Reason </label>
<div >
<input type="text" id="reason" formControlName="reason"
placeholder="Reason" />
</div>
</div>
<button mat-raised-button color="primary" type="submit">Submit </button>
</form>
</div>
</div>
</div>
</div>
When I add data on the form a have 3 properties I want to have all properties of object to update data on database and other properties come from object with name AllDemande enter image description here and the form has 3 properties I want to complete all properties for object Thanks
CodePudding user response：
the property for set to a form group is this.requestApproveForm.controls["fieldName"].setValue()
but we need more information to help you more.
if is for the part of code you have commented you forgot to init the alternate field in the form :
this.requestApproveForm = this.formBuilder.group({
Id: [this.demandeCongeId],
reason: [this.AllDemande.Reason],
status: [this.AllDemande.status, Validators.required],
alternate: ['']
});
CodePudding user response：
when i add this line of code i have this error
initRequestApproveForm() {
this.requestApproveForm = this.formBuilder.group({
Id: [this.demandeCongeId],
reason: [this.AllDemande.Reason],
status: [this.AllDemande.status, Validators.required],
});
this.requestApproveForm.controls["alternate"].setValue(this.AllDemande.alternate )
console.log(this.requestApproveForm.value)
}
