如何从LocalStorage设置angular2表单值

时间:2017-02-13 04:48:09

标签: javascript html angular typescript

基本上,就是这种形式。我有onsubmit函数,它将在LocalStorage中保存fromDate和toDate。在component.ts中,我试图定义一个函数,它将从本地存储中提取日期数据并设置表单值。似乎设置表单值对我不起作用。这是代码:

在component.ts

@ViewChild ( 'formRef' ) form;

this.form.fromDate = new Date(localStorage.getItem("startDate")).getDate()  ;
this.form.toDate = new Date(localStorage.getItem("endDate")).getDate()  ;

component.html

<input name="fromDate" id="fromDate" type="date"   [(ngModel)]="fromDate"

                                               #fromDate ="ngModel"
                                               required>

<input name="toDate " id="toDate " type="date"   [(ngModel)]="toDate "

                                               #toDate ="ngModel"
                                               required>

2 个答案:

答案 0 :(得分:0)

var fromDate = new Date(localStorage.getItem("startDate")).getDate()  ;
var toDate = new Date(localStorage.getItem("endDate")).getDate()  ;

this.form.get('formDate').updateValueAndValidity(fromDate);
this.form.get('toDate').updateValueAndValidity(toDate);

updateValueAndValidity不支持传递Date对象(不记得是否存在):

this.form.get('formDate').updateValueAndValidity(fromDate.toDateString());
this.form.get(toDate').updateValueAndValidity(toDate.toDateString());

答案 1 :(得分:0)

updateValueAndValidity({onlySelf, emitEvent}?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

默认情况下,它还会更新其祖先的值和有效性。

class DC extends React.Component {
    constructor(props) {
      super(props);
    }

    _parseText(text, flag) {
      if (text.length > 200 && flag === true) {
        return text.substr(0, 200) + ' <a onClick={this._parseText(text,false)}>Read More...</a>';
      } else {
        return text;
      }
    }

    render() {
        return ( 
          <p dangerouslySetInnerHTML={{__html:this._parseText('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.', true)}}></p>)
}
}
        
ReactDOM.render(<DC/>, document.getElementById('test'));