如何更改angular2中模型的值？

Question

编辑 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 初始化为 this.dtCompromise = new Date();。但是此后该值未定义。有任何修复建议吗？

已更新

我发现问题了。 Angular2 忽略 type="date" 的输入。更改文本类型后对我有用。现在的问题是。要使用一个字段作为日期是必要的，请使用日期选择器。我使用 material-design-lite 作为框架响应。这不包含用于修复此问题的日期选择器。将有必要使用 jquery 日期选择器。对我来说是大反模式。如果您使用 angular2，这应该会促进开发的全部资源。我对此感到失望。

Answer 1

我发现问题了。 Angular2 忽略 type="date" 的输入。更改文本类型后对我有用。现在的问题是。要使用一个字段作为日期是必要的，请使用日期选择器。我使用 material-design-lite 作为响应式框架。这不包含用于修复此问题的日期选择器。将有必要使用 jquery 日期选择器。对我来说是大反模式。如果您使用 angular2，这应该会促进开发的全部资源。我对此感到失望。

为了解决这个问题，我使用了自定义日期选择器：https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker

Answer 2

是的，我们可以选择使用

<input type="date" [(ngModel)]="company.birthdate"/>

获取我们项目的日期。但是是的，这与多浏览器平台（如 mozila）不兼容，并且有许多跨浏览器库。

我使用 Bootflat 制作了一个时尚的日历 Datepicker

https://github.com/MrPardeep/Angular2-DatePicker

希望这能为您提供更时尚的多浏览器日期选择器。

Answer 3

遗憾的是，NgModel 目前对类型 date 的 input 不起作用。不过，我找到了一个简单的解决方法。

// 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 属性值的方法。我个人更喜欢这个而不是使用某人的自定义选择器，因此会产生依赖性。

Answer 4

ngModel 不起作用，但 ngModelChange 对我有用：

<input class="form-control" type="date" [ngModel]="myDate.value" 
       value="{{myDate.value | date:'yyyy-MM-dd'}}" (ngModelChange)="myDate.value=$event">

如何更改angular2中模型的值？

How to change value of model in angular2?

javascript

typescript

angular