angular2-ngmodel | 易学教程

Angular 2: Select dropdown not selecting option despite “selected” attribute

阅读更多关于 Angular 2: Select dropdown not selecting option despite “selected” attribute

问题 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: Selected: true Text: "kg" Value: "3" [(ngModel)]="UnitOfMeasurementId" contains the value of the item that

Binding the value in a textarea

阅读更多关于 Binding the value in a textarea

问题 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'; import { ViewChild } from '@angular/core'; import { OnInit } from '@angular/core'; @Component({ moduleId: module.id, selector: 'vs-home', templateUrl: 'home.component.html' }) export class HomeComponent { private currentQuery: string =

How to get selected option from select and assign it to select ngModel

阅读更多关于 How to get selected option from select and assign it to select ngModel

问题 I have the following select menu: <div class="medium-3 columns"> <label>First Menu <select name="first-menu"> <option *ngFor="let i of items" [value]="i.name">{{i.name}}</option> </select> </label> </div> I would assing a model to the select menu so i edited the code in the following way (i see it here): <div class="medium-3 columns"> <label>First menu <select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu"> <option *ngFor="let i of items" [value]="i.name">

ErrorHandler in Angular2

阅读更多关于 ErrorHandler in Angular2

问题 I have a question about new class ErrorHandler (was included to RC.6). I did example from official docs: https://angular.io/docs/ts/latest/api/core/index/ErrorHandler-class.html import{ErrorHandler} from "@angular/core"; import{NgModule} from "@angular/core"; export class MyErrorHandler implements ErrorHandler { call(error: any, stackTrace: any = null, reason: any = null) { // do something with the exception console.log("do something with the exception"); } // I handle the given error. public

Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

阅读更多关于 Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

问题 In my component I am trying to unselect all checkboxes with the same class name. querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything. this is the function. I know its wrong to use jQuery like that but it illustrates my goal. unsetAllOptions(){ var self = this; var i = 0; $("input.option_input").each(function(){ i++; var element = self.elRef.nativeElement.querySelector("input.option_input")[i]; if(element.checked){ // console.log(i)

Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

阅读更多关于 Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

In my component I am trying to unselect all checkboxes with the same class name. querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything. this is the function. I know its wrong to use jQuery like that but it illustrates my goal. unsetAllOptions(){ var self = this; var i = 0; $("input.option_input").each(function(){ i++; var element = self.elRef.nativeElement.querySelector("input.option_input")[i]; if(element.checked){ // console.log(i) console.log('unchecking:',i); element.checked=false; element.dispatchEvent(new Event('change')); element =

How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

阅读更多关于 How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

问题 Using ngx-bootstrap Datepicker in an Angular 4 application, I know that normally you can specify the date format this way: <input id="from" name="from" bsDatepicker [(bsValue)]="myModel" value="{{ myModel | date:'yyyy-MM-dd'}}"> but this time I'm inside a template-driven Angular form, so my input is not bound to a variable like myModel in the example above, but it's just bound to the form: <input id="from" name="from" bsDatepicker ngModel> so how can I specify the date format in this case?

How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

阅读更多关于 How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

Using ngx-bootstrap Datepicker in an Angular 4 application, I know that normally you can specify the date format this way: <input id="from" name="from" bsDatepicker [(bsValue)]="myModel" value="{{ myModel | date:'yyyy-MM-dd'}}"> but this time I'm inside a template-driven Angular form, so my input is not bound to a variable like myModel in the example above, but it's just bound to the form: <input id="from" name="from" bsDatepicker ngModel> so how can I specify the date format in this case? Edit : it looks like that a way to achieve this is by creating a new variable newVar inside the component

angular2 access ngModel variable from a directive

阅读更多关于 angular2 access ngModel variable from a directive

问题 I am trying to build a datetime picker directive like the following. <input [(ngModel)]="date1" datetime-picker date-only /> and date1 is assigned as a Date, e.g., new Date() When I display this in html, text in input element looks like the following Thu Jan 01 2015 00:00:00 GMT-0500 I want to display like the following instead 2015-01-01 00:00:00 I want to format date WITHIN a directive using DatePipe instead of showing result from default toString() function. My question is; "within a

Set default select list value Angular2

阅读更多关于 Set default select list value Angular2

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" name="example" class="form-control" [(ngModel)]="exampleArray" (ngModelChange)="changes()"> <option disabled selected>Select a Custom Fix</option> <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option> </select> </div> </div> Typescript changes(){ console.log(this.example.option); }