html5 - strange behaviour from *ngIf -
i busy angular4 app i'm trying conditionally hide/show 2 div elements using *ngif strange results. want show project form when newitem false or null , show item form when newitem true. div containing item form gets displayed should when newitem true project form doesn't removed dom reason... feel quite comfortable angular , have been using while never came accross issue? idea i'm doing wrong? missing simple?
html:
<div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-push-4 page-header"> <h1>quote generator</h1> </div> </div> <div class="row"> <div class="col-md-4 col-md-push-4" *ngif="!newitem"> <button class="btn btn-primary pull-right" (click)="additem()">add item</button> <form [formgroup]="projectform" role="form" (ngsubmit)="calculatetotal(projectform.value)"> <div class="form-group"> <label for="pname">project name</label> <input id="pname" class="form-control" placeholder="enter project name" type="text" [formcontrol]="projectform.controls['name']"> </div> <div class="form-group"> <label for="markup">markup(%)</label> <input id="markup" class="form-control" placeholder="enter markup percentage" type="text" [formcontrol]="projectform.controls['markup']"> </div> <div class="form-group"> <label for="hcost">hardware cost</label> <input id="hcost" class="form-control" placeholder="enter hardware cost" type="text" [formcontrol]="projectform.controls['hardwarecost']"> </div> <div class="form-group"> <label for="lcost">labour cost</label> <input id="lcost" class="form-control" placeholder="enter labour cost" type="text" [formcontrol]="projectform.controls['labourcost']"> </div> <div class="form-group"> <label for="scost">sanding cost</label> <input id="scost" class="form-control" placeholder="enter sanding cost" type="text" [formcontrol]="projectform.controls['sandingcost']"> </div> <div class="form-group"> <label for="sdcost">sundries cost</label> <input id="sdcost" class="form-control" placeholder="enter sundries cost" type="text" [formcontrol]="projectform.controls['sundriescost']"> </div> <button class="btn btn-submit pull-right" [disabled]="!projectform.valid || project.items.length < 1">calculate</button> </form> </div> <div class="col-md-4 col-md-push-4" *ngif="newitem"> <form [formgroup]="itemform" role="form" (ngsubmit)="additem(itemform.value)"> <div class="form-group"> <label for="name">name</label> <input class="form-control" type="text" id="name" placeholder="enter item name" [formcontrol]="itemform.controls['name']"> </div> <div class="form-group"> <label for="height">height</label> <input class="form-control" id="height" type="number" step="0.01" placeholder="enter item height" [formcontrol]="itemform.controls['height']"> </div> <div class="form-group"> <label for="length">length</label> <input class="form-control" id="length" type="number" step="0.01" placeholder="enter item length" [formcontrol]="itemform.controls['length']"> </div> <div class="form-group"> <label for="width">width</label> <input class="form-control" id="width" type="number" step="0.01" placeholder="enter item width" [formcontrol]="itemform.controls['width']"> </div> <div class="form-group"> <label for="qty">qty</label> <input class="form-control" id="qty" type="number" step="0.01" placeholder="enter item quantity" [formcontrol]="itemform.controls['qty']"> </div> <div class="form-group"> <label for="pcbm">price/m<sup>3</sup></label> <input class="form-control" type="number" step="0.01" placeholder="enter item price/cbm" [formcontrol]="itemform.controls['pricem2']"> </div> <button class="btn btn-block btn-submit" [disabled]="itemform.valid">add</button> </form> </div> </div> </div> typescript:
import { component, oninit } '@angular/core'; import { formgroup, formbuilder, validators } '@angular/forms'; import { item } './models/item.model'; import { project } './models/project.model'; @component({ selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css'] }) export class appcomponent implements oninit { itemsform: formgroup; projectform: formgroup; project: project; item: item; newitem: boolean = null; showproject: boolean = true; constructor(private fb: formbuilder) { this.itemsform = fb.group({ 'name': ['', validators.required], 'height': ['', validators.required], 'length': ['', validators.required], 'width': ['', validators.required], 'qty': ['', validators.required], 'pricem3': ['', validators.required], }); this.projectform = fb.group({ 'name': ['', validators.required], 'markup': ['', validators.required], 'hardwarecost': ['', validators.required], 'labourcost': ['', validators.required], 'sandingcost': ['', validators.required], 'sundriescost': ['', validators.required] }); } calculatetotal(project: any) { } additem() { this.newitem = true; } ngoninit() { } }
your error has nothing ngif. see lot of misprints in code
itemsform => itemform width => width pricem3 => pricem2 
Comments
Post a Comment