Emir Marques Emir Marques - 10 days ago 6
TypeScript Question

How to change value of model in angular2?

EDIT 1

My code is:

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>


In the constructor i tried initialize variable dtCompromise as this.dtCompromise = new Date();. But the value is undefined after this. Any sugestion for fix?

UPDATED

I discovered what's problem. Angular2 ignore input with type="date". After change type for text works for me. The problem now is. For use one field as date is necessary use datepicker. I use material-design-lite as framework responsive. This not contains datepicker for fix this. Will be necessary use the jquery datepicker. For me is the big anti-pattern. If you use angular2 this should promote full resource for development. I disappointed with it.

Answer

I discovered what's problem. Angular2 ignore input with type="date". After change type for text works for me. The problem now is. For use one field as date is necessary use datepicker. I use material-design-lite as framework responsive. This not contains datepicker for fix this. Will be necessary use the jquery datepicker. For me is the big anti-pattern. If you use angular2 this should promote full resource for development. I disappointed with it.

For fix this, i used custom datepicker: https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker