typescript - Bind Input Values in Modal with Angular not working with ngModel -
we trying build profile page option open modal window edit same user information. using angular 4 / typescript / firebase / angularfire2. seeing user's profile data on main screen not showing "value" input fields when modal window launched (see picture).
the displayed values (blacked out) show not same data when trying edit.
firebase node content example (node: /users)
note: copied internet browser copy of structure of record /users node.
kgammm5pyvmemxyrxcjah3gooyb4 address: "1234 fake street" businesslinkcode: "" city: "faketown" email: "john@smith.com" modifieddate: "2017-07-25" modifiedtime: "1:20:33 pm" name: "john smith" phone: "1234567890" photourl: "https://firebasestorage.googleapis.com/v0/b/tow..." position: "assistant" state_: "north fake state" zipcode: "12345" component ts (abbreviated):
import { component, oninit } '@angular/core'; import { pagetitleservice } '../../core/page-title/page-title.service'; import {fadeinanimation} '../../core/route-animation/route.animation'; import {ngbmodal, modaldismissreasons} '@ng-bootstrap/ng-bootstrap'; import { angularfiredatabase, firebaseobjectobservable, firebaselistobservable } 'angularfire2/database'; import {formcontrol, validators} '@angular/forms'; import { observable } 'rxjs/observable'; import * firebase 'firebase/app'; import { authservice } '../../services/auth.service'; ... export class userprofilecomponent implements oninit { user: firebaseobjectobservable<any>; ... constructor( private authservice: authservice, private db: angularfiredatabase, private userservice: userservice, private pagetitleservice: pagetitleservice, private modalservice: ngbmodal ) { this.users = db.list('/users'); } ... ngoninit() { this.pagetitleservice.settitle('user profile'); this.authservice.user$.subscribe((user) => { this.user = this.userservice.getuser(user.uid) }); } ... // modal open(content) { this.authservice.user$.subscribe((user) => { this.user = this.userservice.getuser(user.uid) }); this.modalservice.open(content).result.then((result) => { this.closeresult = `closed with: ${result}`; }, (reason) => { this.closeresult = `dismissed ${this.getdismissreason(reason)}`; }); } html
<div fxlayoutwrap="wrap" fxlayoutalign="start"> <div fxflex.gt-md="100" fxflex.gt-sm="100" fxflex="100"> <div class="user-content"> <md-card id="profile"> <div fxlayoutwrap="wrap" fxlayoutalign="start" class="user-profile"> <div class="user-contact-info"> <button style="background-color: #004380; color: white; height: 45px; width: 45px; min-width: 0; padding: 1.5%; border-radius: 50%;" (click)="open(editprofilepicture)" md-raised-button class="mrgn-b-md"><md-icon>image</md-icon></button> <div class="perfect-circle" style="height: 240px; width: 240px; margin: 0 auto; padding-top: 0%;"> <img class="img-responsive img-circle" [src]="(user | async)?.profile_imageurl" alt="{{ (user | async)?.name }}" title="{{ (user | async)?.name }}"> </div> <div class="contact-list"> <h2 style="text-align: center">{{ (user | async)?.name }}</h2> <p style="font-weight: light; font-size: medium; text-align: center"> {{ (user | async)?.position }}</p> <button style="background-color: #004380; color: white; margin-bottom: 10%;" (click)="open(editprofile)" md-raised-button class="mrgn-b-md">edit profile</button> <p><i class="fa fa-envelope mat-text-primary" aria-hidden="true"></i> <strong>e-mail:</strong><a href="mailto:{{ (user | async)?.email }}"> {{ (user | async)?.email }}</a></p> <p><i class="fa fa-phone mat-text-primary" aria-hidden="true"></i> <strong>phone:</strong><a href="tel:{{ (user | async)?.phone }}"> {{ (user | async)?.phone }}</a></p> <p><i class="fa fa-map-marker mat-text-primary" aria-hidden="true"></i> <strong> address:</strong><span> {{ (user | async)?.address }}</span></p> <p><i class="fa fa fa-map mat-text-primary" aria-hidden="true"></i> <strong>city:</strong><span> {{ (user | async)?.city }}</span></p> <p><i class="fa fa fa-globe mat-text-primary" aria-hidden="true"></i> <strong>state:</strong><span> {{ (user | async)?.state_ }}</span></p> </div> </div> <ng-template #editprofile let-c="close" let-d="dismiss"> <div> <div class="modal-header"> <h4 class="modal-title">edit profile</h4> <button style="background-color: transparent; border: none; cursor: pointer;" type="button" class="close" aria-label="close" (click)="d('cross click')"> <i style="font-size: large; color: gray" class="fa fa fa-times" aria-hidden="true"></i> </button> </div> <form #form="ngform" (ngsubmit)="submit(edituser)" class="form"> <md-input-container class="full-width"> <input mdinput placeholder="first , last name" type="text" required [(ngmodel)]="edituser.name" [formcontrol]="nameformcontrol"> </md-input-container> <div class="flex-layout"> <md-input-container class="half-width"> <input mdinput placeholder="position/title" type="text" name="position" [(ngmodel)]="edituser.position" [formcontrol]="positionformcontrol"> </md-input-container> <md-input-container class="half-width"> <span mdprefix>+1 </span> <input mdinput placeholder="phone" #phone maxlength="10" type="tel" name="phone" required [(ngmodel)]="edituser.phone" [formcontrol]="phoneformcontrol"> <md-hint align="end">{{phone.value.length}} / 10</md-hint> </md-input-container> </div> <md-input-container class="full-width"> <input mdinput placeholder="address" type="text" name="address" required [(ngmodel)]="edituser.address" [formcontrol]="addressformcontrol"> </md-input-container> <div class="flex-layout"> <md-input-container class="third-width"> <input mdinput placeholder="city" type="text" name="city" required [(ngmodel)]="edituser.city" [formcontrol]="cityformcontrol"> </md-input-container> <md-input-container class="third-width"> <input mdinput placeholder="state" type="text" name="state" required [(ngmodel)]="edituser.state_" [formcontrol]="state_formcontrol"> </md-input-container> <md-input-container class="third-width"> <input mdinput placeholder="zipcode" #zipcode maxlength="5" name="zipcode" required [(ngmodel)]="edituser.zipcode" [formcontrol]="zipcodeformcontrol"> <md-hint align="end">{{zipcode.value.length}} / 5</md-hint> </md-input-container> </div> <br> <button style="background-color: #004380; color: white;" md-raised-button [disabled]="!form.valid" (click)="submit(user) + c('close click')" class="mrgn-b-md">save account</button> <button style="background-color: gray; color: white;" md-raised-button type="button" class="mrgn-b-md" (click)="c('close click')">cancel</button> </form> </div> </ng-template> <ng-template #editprofilepicture let-c="close" let-d="dismiss"> <div> <div class="modal-header"> <h4 class="modal-title">edit profile picture</h4> <button style="background-color: transparent; border: none; cursor: pointer;" type="button" class="close" aria-label="close" (click)="d('cross click')"> <i style="font-size: large; color: gray" class="fa fa fa-times" aria-hidden="true"></i> </button> </div> <img class="img-responsive" [src]="(user | async)?.profile_imageurl" alt="{{ (user | async)?.name }}" title="{{ (user | async)?.name }}"> <form #form="ngform" (ngsubmit)="submit(user)" class="form"> <br> <input type="file" name="image" class="inputfile form-control" required value="upload" (change)="filebuttoni($event)"/> <br> <button style="background-color: #004380; color: white;" md-raised-button [disabled]="!form.valid" (click)="submit(user) + c('close click')" class="mrgn-b-md">save image</button> <button style="background-color: gray; color: white;" md-raised-button type="button" class="mrgn-b-md" (click)="c('close click')">cancel</button> </form> </div> </ng-template> </div> </md-card> </div> </div>
the problem turned out way ngmodel being applied input elements. @ time, i'm not deep enough angular explain why, work , allows me move forward.
code not working:
<input mdinput placeholder="first , last name" type="text" required [(ngmodel)]="edituser.name" [formcontrol]="nameformcontrol"> code work:
<input mdinput placeholder="first , last name" type="text" name="name" required [ngmodel]="(edituser | async)?.name" [formcontrol]="nameformcontrol"> as can see [(ngmodel)] got switched [ngmodel] , reworked databinding property "(edituser | async)?.name" puts in line how displaying of same field goes when used display.
form code replacement:
<form #form="ngform" (ngsubmit)="updateuser(edituser)" class="form"> <md-input-container class="full-width"> <input mdinput placeholder="first , last name" type="text" name="name" required [ngmodel]="(edituser | async)?.name" [formcontrol]="nameformcontrol"> </md-input-container> <div class="flex-layout"> <md-input-container class="half-width"> <input mdinput placeholder="position/title" type="text" name="position" [ngmodel]="(edituser | async)?.position" [formcontrol]="positionformcontrol"> </md-input-container> <md-input-container class="half-width"> <span mdprefix>+1 </span> <input mdinput placeholder="phone" #phone maxlength="15" type="tel" name="phone" required [ngmodel]="(edituser | async)?.phone" [formcontrol]="phoneformcontrol"> <md-hint align="end">{{phone.value.length}} / 15</md-hint> </md-input-container> </div> <md-input-container class="full-width"> <input mdinput placeholder="address" type="text" name="address" required [ngmodel]="(edituser | async)?.address" [formcontrol]="addressformcontrol"> </md-input-container> <div class="flex-layout"> <md-input-container class="third-width"> <input mdinput placeholder="city" type="text" name="city" required [ngmodel]="(edituser | async)?.city" [formcontrol]="cityformcontrol"> </md-input-container> <md-input-container class="third-width"> <input mdinput placeholder="state" type="text" name="state" required [ngmodel]="(edituser | async)?.state_" [formcontrol]="state_formcontrol"> </md-input-container> <md-input-container class="third-width"> <input mdinput placeholder="zipcode" #zipcode maxlength="5" name="zipcode" required [ngmodel]="(edituser | async)?.zipcode" [formcontrol]="zipcodeformcontrol"> <md-hint align="end">{{zipcode.value.length}} / 5</md-hint> </md-input-container> </div> <br> <button style="background-color: #004380; color: white;" md-raised-button [disabled]="!form.valid" type="submit" class="mrgn-b-md">save account</button> <button style="background-color: gray; color: white;" md-raised-button type="button" class="mrgn-b-md" (click)="c('close click')">cancel</button> </form> 
Comments
Post a Comment