标签: angular2-ngmodel

angular2从指令访问ngModel变量

我正在尝试构建如下所示的日期时间选择器指令.
<input [(ngModel)]="date1" datetime-picker date-only />

并被date1指定为日期,例如,new Date()

当我在html中显示它时,input元素中的文本如下所示
Thu Jan 01 2015 00:00:00 GMT-0500

我希望显示如下所示
2015-01-01 00:00:00

我想使用DatePipe格式化日期WITHIN,而不是显示默认的toString()函数的结果.

我的问题是; "在一个指令中,我如何访问ngModel变量?",例如date1,这样我就可以添加toString()方法.

如果我的方法不对,请告诉我.

directive angular2-ngmodel angular

11
推荐指数
2
解决办法
1万
查看次数

Angular - 没有将"exportAs"设置为"ngModel"的指令

以下是AngularJS项目中的文件.正如一些帖子所建议的那样,我补充说:

ngModel name="currentPassword" #currentPassword="ngModel 
Run Code Online (Sandbox Code Playgroud)

在输入字段中,但仍然出错.

的package.json

.........
"dependencies": {
        "@angular/common": "^2.3.1",
        "@angular/compiler": "^2.3.1",
        "@angular/core": "^2.3.1",
        "@angular/forms": "^2.3.1",
        "@angular/http": "^2.3.1",
        "@angular/platform-browser": "^2.3.1",
        "@angular/platform-browser-dynamic": "^2.3.1",
        "@angular/router": "^3.3.1",
        "core-js": "^2.4.1",
        "rxjs": "^5.0.1",
        "ts-helpers": "^1.1.1",
        "zone.js": "^0.7.2"
    },
   ...............
Run Code Online (Sandbox Code Playgroud)

变化password.component.html

<form #f="ngForm" [formGroup]="changePasswordForm">
        <div class="form-group">
            <label for="currentPassword">Current Password</label> <input
                placeholder="currentPassword" ngModel name="currentPassword"
                #currentPassword="ngModel" id="currentPassword"
                name="currentPassword" type="text" class="form-control" required
                minlength="6" formControlName="currentPassword">
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Change Password</button>
    </form>
Run Code Online (Sandbox Code Playgroud)

变化password.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, ControlContainer, FormGroup, FormControl } …
Run Code Online (Sandbox Code Playgroud)

angular2-forms angular2-ngmodel angular

11
推荐指数
4
解决办法
2万
查看次数

angular2将ngModel传递给子组件

我有ParentComponent和ChildComponent,我需要将ParentComponent中的ngModel传递给ChildComponent.

// the below is in ParentComponent template
<child-component [(ngModel)]="valueInParentComponent"></child-component>
Run Code Online (Sandbox Code Playgroud)

如何在ChildComponent中获取ngModel的值并进行操作?

angular2-ngmodel angular2-components angular

10
推荐指数
1
解决办法
2万
查看次数

Angular 2:使用带有ngModel的管道

我在我的一个表单中使用了JQuery输入掩码[(ngModel)],但由于某种原因它们不能一起工作.使用任何一个单独工作完全正常,但组合两个完全中断[(ngModel)]和新输入不会被发送回组件.经过一段时间的努力,我认为使用Angular 2的管道将是一个很好的解决方案,但我无法弄清楚如何让这两个人一起工作.

这是我用来测试管道的一些代码

<input [(ngModel)]="Amount" id="Amount" name="Amount" class="form-control" type="number" autocomplete="off">
<p>Amount: {{Amount | number:'1.2-2'}}</p>
Run Code Online (Sandbox Code Playgroud)

如果我输入12345,<p>下面的标签将显示12,345.00,这正是我想要它过滤的方式,但我不想让过滤量低于输入,我希望输入本身显示12,345.00.添加相同的管道到ngModel这样:[(ngModel)]="Amount | number:'1.2-2'"给我以下错误.

分析器错误:[Amount |中的第10列的动作表达式中没有管道 编号: '1.2-2'= $事件]

如何在输入中使用管道(或输入掩码)[(ngModel)]

angular2-ngmodel angular2-pipe angular

9
推荐指数
1
解决办法
2万
查看次数

Angular 2:默认选中ngFor中的复选框

我正试图在我的ngFor内的复选框上设置默认值.这是我的复选框项目数组:

tags = [{
  name: 'Empathetic',
  checked: false
}, {
  name: 'Smart money',
  checked: true
}, {
  name: 'Minimal help after writing check',
  checked: false
}, {
  name: 'Easy term sheet',
  checked: true
}];
Run Code Online (Sandbox Code Playgroud)

这是我的HTML

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

所需的结果是获得2个选中,2个未选中的框,但所有这些框都未选中.我也尝试了[checked] ="tag.checked"的不同变体,但它似乎没有做到这一点.

checkbox typescript angular2-ngmodel ngfor angular

9
推荐指数
2
解决办法
4万
查看次数

如何更改窗体内Angular ngx-bootstrap的datepicker中的日期格式

在Angular 4应用程序中使用ngx-bootstrap Datepicker,

我知道通常你可以这样指定日期格式:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">
Run Code Online (Sandbox Code Playgroud)

但是这次我在一个模板驱动的Angular形式里面,所以我的输入没有绑定到myModel上面例子中的变量,但它只是绑定到表单:

<input id="from" name="from"
       bsDatepicker ngModel>
Run Code Online (Sandbox Code Playgroud)

那么在这种情况下如何指定日期格式?

编辑:看起来实现这一点的方法是newVar在组件内创建一个新变量,然后将其绑定到[(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">
Run Code Online (Sandbox Code Playgroud)

不过我想知道是否有更好的解决方案.

datepicker angular2-ngmodel ngx-bootstrap angular angular-forms

9
推荐指数
2
解决办法
3万
查看次数

Angular select option with selected attribute not working

Using Angular 4, I have a html template and I want a selection box with two options. One of those options should be pre-selected by default.

<select name="rate" #rate="ngModel" ngModel required>
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>
Run Code Online (Sandbox Code Playgroud)

Details:

I assign #rate="ngModel" so that I can reference the value somewhere else in the template, in a conditional statement or with interpolation {{rate.value}}. For that to work I simply add ngModel to the tag. I'm not binding to anything in the …

html-select angular2-ngmodel angular

9
推荐指数
2
解决办法
1万
查看次数

Angular 4 - 如何在输入类型中使用货币管道

我有一个HTML输入:

<input [(ngModel)]="item.value" name="inputField" type="text" />
Run Code Online (Sandbox Code Playgroud)

我想格式化它的值并使用现有的管道:

.... [(ngModel)]="item.value | currency:'USD':true" .....
Run Code Online (Sandbox Code Playgroud)

此外,我试图以下面的方式使用它,但它第一次给我理想的输出并在更新字段时显示错误:

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=($event)">
Run Code Online (Sandbox Code Playgroud)

上面的代码导致以下错误.

ERROR错误:InvalidPipeArgument:''对于管道'CurrencyPipe'
在invalidPipeArgumentError(common.es5.js:2610)
处于formatPumber.webpackJsonp
.../../../common /的formatNumber(common.es5.js:3176)LandingPageComponent.webpackJsonp上的@ angular/common.es5.js.CurrencyPipe.transform(common.es5.js:3350)
.../../../../../src/app/guest-handling/landing 在handleEvent的object.eval
[as handleEvent](LandingPageComponent.html:38)的-page/landing-page.component.ts.LandingPageComponent.transformAmount(landing-page.component.ts:54)
(core.es5.js:12014) )
在callWedDebugContext(core.es5.js:13475)
的object.debugHandleEvent [as handleEvent](core.es5.js:13063)
at dispatchEvent(core.es5.js:8607)
at core.es5.js:9218

html-input angular2-ngmodel angular-pipe angular

9
推荐指数
2
解决办法
3万
查看次数

Angular2中的ErrorHandler

我有一个关于新类ErrorHandler的问题(包含在RC.6中).

我从官方文档中做了一些例子: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 handleError( error: any ): void {
        console.log("I handle the given error");
    }

}
@NgModule({
    providers: [
        {
            provide: ErrorHandler,
            useClass: MyErrorHandler
        }
     ]
})
export class MyErrorModule {}
Run Code Online (Sandbox Code Playgroud)

编辑app.module文件后

import {MyErrorHandler} from "./error.module"; …
Run Code Online (Sandbox Code Playgroud)

error-handling angular2-ngmodel angular

7
推荐指数
2
解决办法
8172
查看次数

Angular2/4 mat-select多个ngModel

我有一个mat-select下拉列表,启用了多个,我使用NgModel来存储用户选择的值.

问题是,当我导航到另一个页面并返回时,用户选择的值不在mat-select中..我知道ngModel有这些值...我遗漏了一些东西......

HTML

<mat-form-field>
 <mat-select placeholder="Customers" name="customerDetails" ngDefaultControl       
 formControlName="customerDetails" [(ngModel)]="custonerDetails" 
 [formControl]="customerDetailsCtrl" multiple   
 (ngModelChange)="onCustomerValueChanges(customer)" >

  <mat-option *ngFor="let customer of customerDetailsResult"
  [value]="customer">{{customer.CustomerNo}}- 
                     {{customer.CustomerDescription}}
   </mat-option>
 </mat-select>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

angular-material angular2-forms angular2-ngmodel angular

6
推荐指数
2
解决办法
1万
查看次数