in my angular application i have a list of schedule objects in schedule array that are displayed using ngFor.
i want that whenever i click the checkbox on the left of my schedule box that particular schedule is selected as current schedule and rest is set to false .
i also want that my default selected schedule is the one that is most recently added to the array.
here is my HTML code
<div class="Box" *ngFor="let schedule of availableSchedules">
<div class="row width100">
<div class="col-md-1">
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
</div>
<div class="col-md-11">
<div class="row width100" style="font-size: larger;">
<div class="col-md-4">
From : <span>{{schedule.startTime}}</span>
</div>
<div class="col-md-4">
To : <span>{{schedule.endTime}}</span>
</div>
<div class="col-md-2"></div>
</div>
<label for="days" style="font-size: larger;">Days</label>
<div class="row" name="days" style="margin-top: 5px;padding-left: 5px;">
<span class="chip" *ngFor="let day of schedule.days">{{day}}</span>
</div>
</div>
</div>
</div>
here is my ts code
currentSchedule = new tutorAvailablitySchedule();
availableSchedules: tutorAvailablitySchedule[] = [];
selectSchedule(schedule:tutorAvailablitySchedule) {
this.currentSchedule = schedule;
console.log(event);
}
That you should do the job:
<input type="checkbox"
[ngModel]="schedule===currentSchedule"
(ngModelChange)="selectSchedule($event ? schedule : null)" />
If you need to prevent an empty selection, you should use a radio button instead. In that case, you don't event need to define the selectSchedule function:
<input type="radio" name="schedule"
[value]="schedule"
[(ngModel)]="currentSchedule"/>
I have list of values in div with parent and child relation ship. When I toggle any specific parent record, all the child records associated with other parents also gets opened. I bind this div from service (API)
Please find the sample code used for the above function
<div class="table rts-table-parentChild" *ngFor="let userRole of userRoleActions; let i = index">
<div class="table-row table-header">
<div class="table-cell">
<span *ngIf="userRole.userRoleSubActions.length" id="section{{userRole.actionName}}"
class="margin-right-5 fa fa-plus-circle" role="button"
tabindex="0" [ngClass]="[clickPlus === false ? 'fa fa-plus-circle' : 'fa fa-minus-circle']" (click)="clickPlus=!clickPlus"></span>
{{userRole.actionName}}
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekCreate{{userRole.actionName}}" [(ngModel)]="userRole.isCreateChecked"
(click)="selectParentRole(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox"[ngModelOptions]="{standalone: true}" class="setup-checkbox" id="ChekDelete{{userRole.actionName}}" [(ngModel)]="userRole.isDeleteChecked"
(click)="selectParentRole(i,'delete')">
</div>
</div>
<ng-container *ngIf="clickPlus">
<div style="display:table-row-group;" *ngFor="let item of userRole.userRoleSubActions; let j = index">
<div class="table-row ">
<div class="table-cell" class="subj"> {{item.actionName}}</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isCreateChecked" (change)="isCreateChecked(i,'create')">
</div>
<div class="table-cell">
<input type="checkbox" [ngModelOptions]="{standalone: true}" class="setup-checkbox"
[(ngModel)]="item.isDeleteChecked" (change)="isCreateChecked(i,'delete')">
</div>
</div>
</div>
</ng-container>
Hi because are toggle on variable clickPlus That's why specific parent record, all parent record is togged. So you have to add
show:boolen
in model of userRoleActions and in click event you can toggle like
(click)="userRole.show=!userRole.show"
Hope you understand my point may this will help you.
I have a checkbox inside a ng-template that is called by a ngbpopover. The checkbox is shown, but, I can't checked or unchecked the checkbox. But, it works when coded it in the stackblitz.
Stackblitz code -
https://stackblitz.com/edit/angular-4ueruh?file=src%2Fapp%2Fpopover-triggers.html
<div class="container sr-get-your-text">
<div class="row">
<div class="col-12">
<!-- Page title -->
<sr-title [value]="content.title"></sr-title>
<!-- Reading name and author -->
<div class="get-your-text-subtext" [innerHtml]="content.subText"></div>
<div class="sr-path-selection">
<button
*ngFor="let option of options; trackBy : trackEntryItems"
[attr.aria-label]="option.label"
[value]="option.name.toLowerCase()"
[innerText]="option.name"
[ngClass]="{'sr-path-selected': option.selected}"
[ngbPopover]="(option.name.toLowerCase() === 'anthology') && !showAgainCheck && popContent"
placement="top"
#popoverCheckbox="ngbPopover"
(click)="onPathSelect(option)"></button>
</div>
<!-- Recommendation -->
<div class="recommendation" [innerHtml]="content.recommendation"></div>
<button srPrimaryButton
*ngIf="isOptionSelected"
[isButtonBar]="true"
(click)="onContinue()">Continue
</button>
</div>
</div>
</div>
<ng-template #popContent>
<form [formGroup]="showAgainForm" #frm="ngForm">
<div class="form-check" (mouseleave)="onHoverOutside()">
<input
id="showAgain"
formControlName="showAgainCheckBox"
class="form-check-input"
type="checkbox"
[checked]="showAgainCheck"
(click)="onChanged(frm)">
<label for="showAgain" class="form-check-label">Show Again</label>
</div>
</form>
</ng-template>
expected to be able to check the checkbox.
Result is it's not accessible.
I have this HTML template:
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Link </label>
<input type="text" class="form-control" id="field-name" placeholder="Link"
[(ngModel)]="HrefLink" name="HrefLink">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-value">Label</label>
<input type="text" class="form-control" id="Label" placeholder="Label"
[(ngModel)]="HrefLabel" name="HrefLabel">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
</div>
In this simple form, I can add one or more inputs. This is the live example: https://bootsnipp.com/snippets/VPRlZ
My question is: How can I get the values of all added fields inside my angular component ? I can add the directive ngModel like above in every input but then all directives will have the same name and I'll not get all values?
Unfortunately, I can't place the ngModel in a higher level in the div of form-group ...
Please tell me if my question is clear or you need more information.
Why not you base the quantity of input in an array of Objects(InputModel it is a custom interface or class) and finally use *ngfor to show them.
InputModel
{
input_value: string,
index_of: number,
isDelete: boolean, //if false is "+" if true is "x"
}
Component.ts
inputValues: InputModel[] = [];
count: number = 0;
OnInit{
this.inputValues.push({
input_value:"",
index_of: this.count,
isDelete: true
});
}
addMore(){
this.inputValues.push({
input_value:"",
index_of: this.count++,
isDelete: false
});
}
Html Template
<div *ngFor="let input of inputValues">
<input [(ngModel)]="input.input_value" />
<!-- TODO button with 'x' or '+' depends of input.isDelete -->
</div>
Here is the error Message:
WARNING in Invalid background value at 160:282. Ignoring.
WARNING in Invalid background value at 184:60084. Ignoring.
ERROR in src/app/form/form.component.html(14,48): : Property 'name' does not exist on type 'FormComponent'.
src/app/form/form.component.html(27,69): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(32,67): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(37,71): : Property 'officePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(168,21): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(169,21): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(170,21): : Property 'officePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(189,11): : Property 'NaN' does not exist on type 'FormComponent'.
src/app/form/form.component.html(14,48): : Property 'name' does not exist on type 'FormComponent'.
src/app/form/form.component.html(27,69): : Property 'homePhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(32,67): : Property 'cellPhone' does not exist on type 'FormComponent'.
src/app/form/form.component.html(37,71): : Property 'officePhone' does not exist on type 'FormComponent'.
Here is my form.component.html
<div [hidden]="submitted" >
<form #calculatingForm="ngForm" (ngSubmit)="onSubmit(calculatingForm)" class="ui big form">
<h2 class="ui dividing header">ProShine Quote Calculator</h2>
<div class="spacer30"></div>
<div class="ui grid">
<div class="row">
<div class="eight wide column">
<div class="required field">
<label for="name">Client Name</label>
<input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>
<div [hidden]="client.valid || client.pristine" class="ui negative message">
<div class="header">
No Client Name Entered
</div>
<p>Please Enter A Name
</p>
</div>
</div>
<div class="field">
<label for="homePhone">Home Phone</label>
<input type="tel" name="homePhone" id="homePhone" [(ngModel)]="homePhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
<div class="field">
<label for="cellPhone">Cell Phone</label>
<input type="tel" name="cellPhone" id="cellPhone" [(ngModel)]="cellPhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
<div class="field">
<label for="officePhone">Office Phone</label>
<input type="tel" name="officePhone" id="officePhone" [(ngModel)]="officePhone" placeholder="(123) 456-7890"
[textMask]="{mask: mask}">
</div>
</div>
<div class="eight wide column">
<div class="required field">
<label for="totalPanes">Total Number of Panes</label>
<input type="number" name="totalPanes" id="totalPanes" [(ngModel)]="totalPanes" #panes="ngModel" required>
<div [hidden]="panes.valid || panes.pristine" class="ui negative message">
<div class="header">
You Didn't Enter A Number
</div>
<p>Please Enter the Number of Panes
</p>
</div>
</div>
<div class="field">
<label for="floorPanes">Number of Floor Panes</label>
<input type="number" name="floorPanes" id="floorPanes" [(ngModel)]="floorPanes">
</div>
<div class="field">
<label for="outsideLadderPanes">Number of Outside Ladder Panes</label>
<input type="number" name="outsideLadderPanes" id="outsideLadderPanes" [(ngModel)]="outsideLadderPanes">
</div>
<div class="field">
<label for="ladderPanesInAndOut">Number of Indoor AND Outdoor Ladder Panes</label>
<input type="number" name="ladderPanesInAndOut" id="ladderPanesInAndOut" [(ngModel)]="ladderPanesInAndOut">
</div>
</div>
</div> <!--End of row-->
<div class="spacer30"></div>
<div class="three column row">
<div class="four wide column"></div>
<div class="eight wide column">
<div class="required field">
<label for="currentUser">Created By</label>
<select name="currentUser" id="currentUser" class="ui fluid dropdown " [(ngModel)]="currentUser" required>
<option value="">-- Select --</option>
<option value="Jason Walle">Jason Walle</option>
<option value="Aubree Walle">Aubree Walle</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="ui dividing header">Additional Options</h2>
<!-- <div class="spacer30"></div> -->
</div>
</div>
<div class="row">
<div class="eight wide column">
<div class="field">
<label for="referral">Referral By</label>
<input type="text" name="referral" id="referral" [(ngModel)]="referral" >
</div>
</div>
<div class="three wide column">
<div class="field">
<label for="clientDiscount">Discount</label>
<input type="text" name="clientDiscount" id="clientDiscount" [(ngModel)]="clientDiscount" >
</div>
</div>
</div>
<div class="row">
<div class="eight wide column"></div>
<div class="three wide column">
<div class="field">
<label for="discountType">Discount Type</label>
<select name="discountType" id="discountType" class="ui fluid dropdown " [(ngModel)]="discountType" required>
<option value="">-- Select --</option>
<option value="Percentage">Percentage(%)</option>
<option value="Dollars">Dollars($)</option>
</select>
</div>
</div>
</div>
</div>
<div class="spacer50"></div>
<button type="submit" class="ui blue button">Calculate</button>
<button type="button" class="ui olive button" (click)="calculatingForm.reset()">New Client</button>
<div class="spacer75"></div>
</form>
</div>
<div [hidden]="!submitted" class="results-div">
<button (click)="goBack()" class="ui blue button"> <i class="arrow alternate circle left outline icon"></i> Go Back</button>
<!-- ============ PDF Generating Section ============= -->
<div id="content">
<div class="ui grid">
<div class="three column row">
<div class="column"></div>
<div class="column">
<img src="./../../assets/proshine-card.jpg" alt="" class="proshine-logo">
</div>
<div class="column"></div>
</div>
</div>
<div class="spacer50"></div>
<div class="ui grid">
<div class="row">
<div class="twelve wide column">
<br>
<h2 class="">Client Name: <span style="margin-left: 50px;font-size: larger">{{ clientName }}</span></h2>
<div class="spacer30"></div>
</div>
<div class="eight wide column">
<h3>Home Phone #: {{homePhone}} </h3>
<h3>Cell Phone #: {{cellPhone}} </h3>
<h3>Office Phone #: {{officePhone}} </h3>
</div>
</div>
</div>
<hr>
<div class="spacer30"></div>
<div class="ui grid">
<div class="row">
<div class="eight wide column">
<h3># of Floor Panes: <h2>{{floorPanes}}</h2> </h3>
<h3># of OUTSIDE Ladder Panes: <h2>{{outsideLadderPanes}}</h2> </h3>
<h3># of Inside AND Outside Ladder Panes: <h2>{{ladderPanesInAndOut}}</h2> </h3>
</div>
</div>
</div>
<hr>
<!-- <h3>Original Quote: ${{clientDiscount - }} </h3> -->
<h3 *ngIf="clientDiscount!= NaN">Client Discount: <span style="color:firebrick">- ${{discountPrice}} </span> </h3>
<h1>Total Quote: <span class="quotePrice" >${{estimatedQuote}}</span> </h1>
<div class="spacer50"></div>
<h3>Created By {{currentUser}} on {{currentDate | date:'fullDate'}} </h3>
</div>
<div class="spacer50"></div>
<button class="ui orange button" (click)="downloadPDF()">Export As PDF</button>
<div class="spacer75"></div>
</div>
Here is my form.component.ts file
import { NavigationComponent } from './../navigation/navigation.component';
import { Estimate } from './../estimate';
import { NgForm, FormsModule } from "#angular/forms";
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
constructor(
) { }
// =========== Text Mask ==============
mask: any[] = ['+','1',' ', '(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// =========== Variables ===========
submitted = false;
// isOn = false;
costPerPane = 0.00;
costForLadder = 0.00;
costForFloorPanes = 0.00;
estimatedQuote = 0.00;
// quoteDemo = new Estimate("Phil",12,12,0,0,0);
clientName:string = "";
clientHomePhone:string;
clientCellPhone:string;
clientOfficePhone:string;
currentUser:string;
currentDate:string;
referral:string;
totalPanes:number;
floorPanes:number;
outsideLadderPanes:number;
ladderPanesInAndOut:number;
clientDiscount:number;
discountType:string;
discountPrice:any;
onSubmit(calculatingForm :NgForm){
this.submitted = true;
//Getting Form Input Values
this.clientName = calculatingForm.form.get('name').value;
this.clientHomePhone = calculatingForm.form.get('homePhone').value;
this.clientCellPhone = calculatingForm.form.get('cellPhone').value;
this.clientOfficePhone = calculatingForm.form.get('officePhone').value;
this.totalPanes = calculatingForm.form.get('totalPanes').value;
this.floorPanes = calculatingForm.form.get('floorPanes').value;
this.outsideLadderPanes = calculatingForm.form.get('outsideLadderPanes').value;
this.ladderPanesInAndOut = calculatingForm.form.get('ladderPanesInAndOut').value;
this.clientDiscount = calculatingForm.form.get('clientDiscount').value;
this.discountType = calculatingForm.form.get('discountType').value;
this.currentUser = calculatingForm.form.get('currentUser').value;
this.currentDate = Date.now().toString();
// ============ TOTAL QUOTE ==========
this.estimatedQuote = (this.costForFloorPanes + this.costForLadder);
//------ Discount Amount ----------
if (this.discountType == "Percentage") {
this.clientDiscount /= 100;
this.discountPrice = (this.estimatedQuote * this.clientDiscount);
this.estimatedQuote -= (Math.round(this.discountPrice));
this.discountPrice = (Math.round(this.discountPrice)).toString();
// this.estimatedQuote = (Math.ceil(this.estimatedQuote));
}else if(this.discountType == "Dollars"){
this.discountPrice = this.clientDiscount.toString();
this.estimatedQuote -= this.clientDiscount;
}else{
this.estimatedQuote = this.estimatedQuote;
}
}//End of onSubmit
public goBack(){
this.estimatedQuote = 0.00;
this.submitted = false;
}
public downloadPDF(){
return xepOnline.Formatter.Format('content', {render: 'download'});
}
ngOnInit() {
}
}
The error seems to be in the HTML:
[(ngModel)]="stufffffffs"
You have taken the wrong ngModel binding, the variables you have taken in component are not taken in form
In component you have taken,
clientName:string = "";clientHomePhone:string;clientCellPhone:string;
but in form you took,
Name:string = "";HomePhone:string;CellPhone:string;
You forgot to prepend client
Eg;
<input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>
Should be,
<input type="text" name="name" [(ngModel)]="clientName" #client="ngModel" required autofocus>
so, replace all the occurrences with the same.
Use the same variables with ngModel that are defined in the component. It basically means there is a property in the component, that it is referring to. But as there is no such variable as "homePhone" in component, hence it is giving an error.
[(ngModel)]="clientHomePhone" instead of [(ngModel)]="homePhone"
<input type="tel" name="homePhone" id="homePhone" [(ngModel)]="clientHomePhone" placeholder="(123) 456-7890" [textMask]="{mask: mask}">
Similarly, for all other inputs for which the error is coming.
Read this for how ngModel works.