[英]How to change value of model in angular2?
編輯1
我的代碼是:
Modal.ts
import {Component, NgIf, FORM_DIRECTIVES} from 'angular2/angular2';
declare function initMaterial();
@Component({
selector: 'modal',
directives: [NgIf, FORM_DIRECTIVES],
templateUrl: './frontend/components/modal/modal.html',
styleUrls: ['./frontend/components/modal/modal.css']
})
export class Modal {
public isOpen: boolean = false;
public dtCompromise: Date;
constructor() {
this.dtCompromise = new Date();
}
open() {
this.isOpen = true;
initMaterial();
}
close() {
this.isOpen = false;
}
}
Modal.html
<div class="card-wide mdl-card mdl-shadow--2dp modal" *ng-if="isOpen">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Novo compromisso</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="date" [(ng-model)]="dtCompromise"/>
<label class="mdl-textfield__label" for="dtCompromisse">Data</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield">
<textarea class="mdl-textfield__input" type="text" rows= "5" [(ng-model)]="dsCompromise"></textarea>
<label class="mdl-textfield__label" for="dsCompromisse">Descrição</label>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" (click)="save($event, dsCompromise, dtCompromise);">
Salvar <i class="material-icons">save</i>
</button>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="close()">
<i class="material-icons">close</i>
</button>
</div>
</div>
在構造函數中,我嘗試初始化變量dtCompromise as this.dtCompromise = new Date(); 。 但在此之后,該值未定義。 任何消化修復?
更新
我發現了什么問題。 Angular2忽略輸入type =“date”。 更改后的文本類型為我工作。 現在的問題是。 要使用一個字段作為日期是必要的使用datepicker。 我使用material-design-lite作為框架響應。 這不包含修復此問題的datepicker。 將有必要使用jquery datepicker。 對我來說,這是一個很大的反模式。 如果您使用angular2,這應該促進完整的開發資源。 我很失望。
可悲的是, NgModel
目前無法input
類型date
。 但是我發現了一個簡單的解決方法。
// In your HTML
<input #myDatePicker
type="date"
value='{{ myDate | date:"yyyy-MM-dd" }}'
(input)="onInput(myDatePicker.value)" />
// In your component (TypeScript):
public myDate: Date;
public onInput(value: Date): void{
this.myDate = value;
}
這為您提供了一種在組件上設置myDate
屬性值的方法。 我個人更喜歡使用某人的自定義選擇器,從而產生依賴性。
ngModel
不起作用,但ngModelChange
適合我:
<input class="form-control" type="date" [ngModel]="myDate.value"
value="{{myDate.value | date:'yyyy-MM-dd'}}" (ngModelChange)="myDate.value=$event">
我發現了什么問題。 Angular2忽略輸入type =“date”。 更改后的文本類型為我工作。 現在的問題是。 要使用一個字段作為日期是必要的使用datepicker。 我使用material-design-lite作為框架響應。 這不包含修復此問題的datepicker。 將有必要使用jquery datepicker。 對我來說,這是一個很大的反模式。 如果您使用angular2,這應該促進完整的開發資源。 我很失望。
為了解決這個問題,我使用了自定義datepicker: https : //github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker
是的,我們有選擇使用
<input type="date" [(ngModel)]="company.birthdate"/>
獲取我們項目的日期。 但是,這與多瀏覽器平台(如mozila)不兼容,並且有許多相同的跨瀏覽器庫。
我使用Bootflat制作了一個時尚的日歷Datepicker
希望這能為您提供更多時尚和多瀏覽器的日期選擇。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.