我正在尝试构建如下所示的日期时间选择器指令.
<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()方法.
如果我的方法不对,请告诉我.
以下是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) 我有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的值并进行操作?
我在我的一个表单中使用了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)]?
我正试图在我的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"的不同变体,但它似乎没有做到这一点.
在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
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)
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输入:
<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
我有一个关于新类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) 我有一个mat-select下拉列表,启用了多个,我使用NgModel来存储用户选择的值.
问题是,当我导航到另一个页面并返回时,用户选择的值不在mat-select中..我知道ngModel有这些值...我遗漏了一些东西......
<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 ×10
angular2-ngmodel ×10
angular-pipe ×1
checkbox ×1
datepicker ×1
directive ×1
html-input ×1
html-select ×1
ngfor ×1
typescript ×1