J'utilise ng-template pour la fenêtre modale et une fois que la fenêtre modale est ouverte, je veux que la valeur soit remplie automatiquement. Mais à chaque fois que mon formulaire arrive undefined . Y a-t-il un moyen d'y parvenir ?
Mon code est le suivant : Code pour la fenêtre modale. J'appelle updateProfile() en cas de clic sur un bouton de la page. J'utilise ng-bootstrap Modal.
/****Component.html*****/
<ng-template #profile let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Profile update</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Personal Information</p>
<form novalidate #updateUserForm="ngForm" (ngSubmit)="updateUser(updateUserForm)">
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">Mobile Number
<span class="asterisc"> *</span>
</label>
<label>{{data.mobileNumber}}</label>
</div>
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">First Name
<span class="asterisc"> *</span>
</label>
<input type="text" required ngModel required name="firstName" class="form-control" value="{{data.firstName}}">
</div>
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">Last Name
<span class="asterisc"> *</span>
</label>
<input type="text" required ngModel name="lastName" class="form-control" value="{{data.lastName}}">
</div>
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">Email
<span class="asterisc"> *</span>
</label>
<input type="text" required ngModel name="email" class="form-control" value="{{data.emailId}}">
</div>
<div class="form-inline container">
<input type="checkbox" [(ngModel)]="changePassword" name="changePassword" class="form-control checkmark"> Change Password
</div>
<div id="updatePassword" *ngIf="changePassword">
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">Current Password
<span class="asterisc"> *</span>
</label>
<input type="password" required ngModel minlength="6" name="currentPassword" class="form-control" [(ngModel)]="currentPasswordText"
#currentPassword="ngModel">
<div *ngIf="currentPassword.invalid && (currentPassword.dirty || currentPassword.touched || currentPassword.errors.minlength)"
class="alert alert-danger">
<div *ngIf="currentPassword.errors.required">
Password is required.
</div>
<div *ngIf="currentPassword.errors.minlength">
Password must be at least 6 characters long.
</div>
</div>
</div>
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">New Password
<span class="asterisc"> *</span>
</label>
<input type="password" required ngModel minlength="6" name="newPassword" class="form-control" [(ngModel)]="newPasswordText"
#newPassword="ngModel">
<div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched || newPassword.errors.minlength)" class="alert alert-danger">
<div *ngIf="newPassword.errors.required">
Password is required.
</div>
<div *ngIf="newPassword.errors.minlength">
Password must be at least 6 characters long.
</div>
</div>
</div>
<div class="form-inline margin-bottom form-padding">
<label class="col-sm-3">Confirm Password
<span class="asterisc"> *</span>
</label>
<input type="password" required ngModel minlength="6" name="ConfirmPassword" class="form-control" [(ngModel)]="ConfirmPasswordText"
#ConfirmPassword="ngModel">
<div *ngIf="ConfirmPassword.invalid && (ConfirmPassword.dirty || ConfirmPassword.touched || ConfirmPassword.errors.minlength)"
class="alert alert-danger">
<div *ngIf="ConfirmPassword.errors.required">
Password is required.
</div>
<div *ngIf="newPasswordText !== '' && ConfirmPasswordText !== newPasswordText" class="alert alert-danger">
Password didnot match
</div>
<div *ngIf="ConfirmPassword.errors.minlength">
Password must be at least 6 characters long.
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="SAVE">
</div>
</form>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-priamary set-col" (click)="c('Close click')">Save</button>
</div> -->
</ng-template>
/*typescript file**/
openProfile(profile){
let id = '5b39e0d0be883b029870bfc8';// hardcoded value
this.modalService.open(profile, { size: 'lg' });
this._service.getUserProfile(id).subscribe((res)=>{
console.log(res);
this.data = res;
//this.form.controls['firstName'].setValue(res['firstName']);
//this.updateUserForm['']
this.UpdateUserForm.patchValue({
'firstName':this.data.firstName
})
},(error)=>{
console.log(error)
});
}/*réponse */
{
"isActive": false,
"role": "admin",
"permissions": [
"101",
"202"
],
"_id": "5b39e0d0be883b029870bfc8",
"firstName": "test",
"lastName": "test",
"emailId": "test@gmail.com",
"password": "$2b$10$sQ1CCrtRy/Hvd3p3tje7t.A4.G7Jt2ayoETpniW8RlWSjkj1H77l2",
"mobileNumber": "xxxxxxxxxx",
"createdAt": "2018-07-02T08:22:40.223Z",
"__v": 0
}
