form下的基于angular material的Datepicker报错解决

正确代码javascript

   <form class="pad5" #testform="ngForm" (ngSubmit)="onSubmit(testform.value)">
    <mat-grid-tile>
          <mat-form-field>
              <input matInput [matDatepicker]="picker" placeholder="申请日期" name="date"  [(ngModel)]="model['test']"
                  #test="ngModel">
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker disabled="false"></mat-datepicker>
          </mat-form-field>
      </mat-grid-tile>
  </form>

问题:java

1.spa

解决:在form中使用ngModel 的时候须要给input加上 name 属性,或者是给input加上   [ngModelOptions]="{standalone: true}"  设置了这个属性以后input就不会加在FormGroup中(使用带有“ngModel"的”<input>“标签时,系统会自动为这个标签建立一个叫作”FormControl"的对象,而且会自动把它添加到”FormGroup"中。而“FormControl"在”FomGroup“中是用"<input>"标签上的”name"属性来作标识的。),可是这样form提交的时候就不会获取到Datepicker中输入的数据orm

2.一直获取不到Datepicker的数据对象

缘由:在input上加了disabled 被忽视了blog

 <input matInput [matDatepicker]="picker" placeholder="申请日期" name="date" disabled  [(ngModel)]="model['test']" #test="ngModel">
相关文章
相关标签/搜索