Angular 2 searchtext

Issue I have a dropdown menu with a search function and a list with projects (and checkboxes) I would like to make the searchterm update the projects in that list. example: I have 5 projects: – project1 – potato –

Continue reading

Angular 2 | NgformControl Prevents my NgModel from updating

Issue This is my code: HTML: <div *ngFor=”let reject of rejects, let i = index”> <h2>{{reject.reason}}</h2> <input type=”text” [(ngModel)]=”reject.reason” [ngFormControl]=”inputField”> <rt-dropdown (selectedReason)=”selectReason($event.value, i)”></rt-dropdown> </div> and my mainTS: class { inputField = new Control(); constructor( private _broadcastService : BroadcastService) { this.inputField.valueChanges

Continue reading

Angular2, inputmask ngModel binding

Issue I have some problem with ng2 and inputmask. For example I have had this code component.html <div class=”form-group col-sm-7″> <label class=”control-label” for=”sender-phone”>Phone *</label> <input type=”text” [(ngModel)]=”sender.phone” class=”form-control” id=”sender-phone” placeholder=”Phone”> </div> component.ts ngAfterViewInit() { let phoneNumberInput = document.getElementById(‘sender-phone’); let inputmask

Continue reading

Set default select list value Angular2

Issue I want to set the default option for the select in angular 2 as “Select an option”. Here is the code that I have so far: HTML <div class=”form-group”> <label class=”col-md-4 control-label” for=”CustomFix”>Select an option:</label> <div class=”col-md-4″> <select id=”example”

Continue reading

Angular 2: Select dropdown not selecting option despite "selected" attribute

Issue I have the following code for a select dropdown: <select id=”UnitOfMeasurementId” name=”UnitOfMeasurementId” [(ngModel)]=”UnitOfMeasurementId”> <option *ngFor=”let unit of UnitOfMeasurements” [ngValue]=”unit.Value” [selected]=”unit.Selected”>{{unit.Text}}</option> </select> Each item in the UnitOfMeasurements array looks something like this: Selected: false Text: “lb” Value: “1” Or this:

Continue reading

Angular 2 ngModel and index with select element

Issue I have a ng for loop like so <template ngFor let-game [ngForOf]=”(games)” let-index=”index”> <tr> <td> <select [(ngModel)]=”selectedPrice” class=”form-control” name=””> <option *ngFor=”let price of prices”>{{price}}</option> </select> </td> <td> </tr> </template> Obviously, changing the price for one element changes it for

Continue reading

Angular2 ngModel inside of ngFor

Issue I am trying to bind an array of strings from my inputs, so in the html file I wrote this: <div *ngFor=”let word of words; let in=index” class=”col-sm-3″> <div class=”form-group”> <input type=”text” [(ngModel)]=”words[in]” class=”form-control” [attr.placeholder]=”items[in]” required> </div> </div> But

Continue reading

Dynamically changing ngModel from button presses – Angular

Issue I have this code which allows the user to filter by a certain field: <input type=”text” class = “form-control” [(ngModel)]=”siteFilter.site_name”> <button type=”button” class=”btn btn-default”>Address</button> <button type=”button” class=”btn btn-default”>Site</button> <button type=”button” class=”btn btn-default”>Phone</button> In the component.ts file: siteFilter: any =

Continue reading

Binding the value in a textarea

Issue I’m trying to do the simplest two way binding in Angular2. I would like to share a variable between my component and it’s template. My template is: <textarea [(ngModel)]=”currentQuery”></textarea> And my component is: import { Component } from ‘@angular/core’;

Continue reading

Angular trying to use ngModel on html element

Issue What Im trying is this: <div class = “form-group”> <label for=”funktion”>Funktion</label> <select formControlName=”funktion” id=”funktion” class=”form-control” ngModel #Funktion=”ngModel” required > <option *ngFor=”let Funktion of funktionen” value=”{{Funktion.Name}}”>{{Funktion.Name}}</option> </select> </div> <div *ngIf=”Funktion.value == ‘Administrator’ “> Some Text here </div> But it get

Continue reading

writeValue function in ControlValueAccessor class called once in angular 2 custom component

Issue there is a custom angular2 component like below: template <input class=”form-control” id=”searchbox” placeholder=”شهر” (keyup)=”search()” [(ngModel)]=”name” autocomplete=”off”/> <div id=”searchresult” *ngFor=”let city of cities” (click)=”cityselected(city)”> {{city.name}} </div> component @Component({ moduleId: module.id, selector: ‘city-search’, templateUrl: ‘./city-search.component.html’, styleUrls: [‘./city-search.component.css’], providers: [ { provide:

Continue reading

(Editing Angular 5) I can't get the values of the object that is in NgModel

Issue I could not get the object of this field component.html <div class=”form-group”> <input type=”number” name=”totalPrice” class=”form-control” #lastname=”ngModel”[(ngModel)]=”invoiceService.selectedInvoice.totalPrice” readonly> </div> <!– working ok –> <div class=”form-group”> <input type=”number” name=”purchases” class=”form-control” #purchases=”ngModel” [(ngModel)]=”invoiceService.selectedInvoice.purchases[‘product’]” readonly> </div><!– not working –> this the element

Continue reading

RadioButton ngmodel not working for boolean values

Issue I have two radio buttons in Sample with ngModel. <div id=”container”> <input type=”radio” id=”radiobuttonstoerung1″ label=”Blinkend” name=”stoerungBlinkend” [(ngModel)]=”project.modelvalue” value=”true”/> <input type=”radio” id=”radiobuttonstoerung2″ label=”Dauersignal” name=”stoerungBlinkend” [(ngModel)]=”project.modelvalue” value=”false”/> </div> When I passed the boolean variable it is not working. export class RadioButtonController

Continue reading

How to pass object as a param on ngModelChange angular 2

Issue Notice: Im just starting with angular.. Ok, this is what I have: <select class=”form-control custom-select” [(ngModel)]=package (ngModelChange)=”bindPackageCount(package)” formControlName=”packagingProfile”> <option *ngFor=”let package of createdPackageData” [value]=”package.count”> {{package.package.name}} – {{package.type.name}} </option> </select> By providing package.count as [value] of a select tag I

Continue reading

angular2 pass ngModel to a child component

Issue I have ParentComponent and a ChildComponent, and I need to pass the ngModel in ParentComponent to ChildComponent. // the below is in ParentComponent template <child-component [(ngModel)]=”valueInParentComponent”></child-component> how can I get the value of ngModel in ChildComponent and manipulate it?

Continue reading

Angular 2- Error Cannot assign to a reference or variable

Issue I am using Angular 2. I have 2 nested ng-template as below: <ng-template ngFor let-support [ngForOf]=”support”> <div class=”row”> <div class=”col-sm-3″> <div class=”form-group form-float”> <div class=”form-line focused”> <select [ngModelOptions]=”{standalone: true}” [(ngModel)]=”support.option” class=”form-control”> <option value=”1″>1</option> <option value=”2″>2</option> <option value=”3″>3</option> <option value=”4″>4</option>

Continue reading

Angular 2 set and bind checkboxes with a ngFor

Issue I have an array like this: objectArray = [ {“name”: “Car”}, {“name”: “Bike”}, {“name”: “Boat”}, {“name”: “Plane”} ]; And the template like this: <li *ngFor=”#obj of objectArray”> <a href=”#” class=”small” data-value=”option1″ tabIndex=”-1″> <input type=”checkbox” (change)=”expression && expression.value = $event.target.checked

Continue reading

ngModel two way databinding does not bind correctly inside a *ngFor loop

Issue I have the following html inside a ngForm: <div class=”form-group form-group-flex” *ngFor=”let customerRole of customerRoles; let i = index”> <div class=”role-name”> <label for=”roleName”>Rolename{{i + 1}}</label> <input type=”text” class=”form-control” name=’role-name’ id=”roleName” [(ngModel)]=”customerRole.name”/> </div> <div class=”hourly-wage”> // can ignore this div,

Continue reading

ControlValueAccessor ngModel not being updated

Issue This is simple custom form control @Component({ selector: ‘app-custom-control’, template: ` {{ value }} <input [ngModel]=”value” (ngModelChange)=”onChange($event)”> `, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomControlComponent), multi: true, }] }) export class CustomControlComponent implements ControlValueAccessor { private value: any;

Continue reading

How can avoid the use of ngModel

Issue I’ve been stuck on something for hours and I need some help. I’m pretty new to angular. I’m working with the reactive forms, showing my code and explaining what I want to accomplish. <mat-form-field> <mat-select [(ngModel)]="filterCate" placeholder="Cate" type="search" aria-label="Search"

Continue reading

How to show placeholder (empty option) in select control in Angular 2?

Issue I have this code in my template: <select [ngModel]=”selectedSubSectionId” (ngModelChange)=”onSubSectionChange($event)”> <option *ngFor=”let subSection of event.subSections” [ngValue]=”subSection.id”>{{ subSection.name }}</option> </select> In my component: public selectedSubSectionId: any; public onSubSectionChange(subSectionId: any) { // some code I execute after ngModel changes. } This

Continue reading

Error: NG0301: Export of name 'ngModel' not found

Issue So I’m trying to add a simple validation message. App.Module.ts import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; @NgModule({ … imports: [ FormsModule, ReactiveFormsModule, ] }) HTML <div class="form-group"> <label>Nickname</label> <input type="text" class="form-control" id="nickname" formControlName="nickname" [(ngModel)]="MyProfileForm.nickname" name="nickname" #nickname="ngModel"> <div [hidden]="nickname.valid"

Continue reading

Angular2 ngModelChange previous value

Issue Is there a way to get the previous(last) value of a field on ngModelChange? What I have goes something like this HTML <input type=”text” [(ngModel)]=”text” (ngModelChange)=”textChanged($event)”> Handler private textChanged(event) { console.log(‘changed’, this.text, event); } What I get is changed

Continue reading