时间戳

首页 > 解决方案 > Angular2 Material2 - 如何在表单重建时禁用/启用 mat-datepicker-toggle

angular2-forms - Angular2 Material2 - 如何在表单重建时禁用/启用 mat-datepicker-toggle

问题描述

角度版本 5.2.4，Material2 5.2.4

我正在使用这种元素组合：

...以在数据源更改时重建的形式。

我可以在初始表单构建中将输入和 mat-datepicker-toggle 设置为禁用或启用。重建表单时，输入的 disabled 属性是可设置的。但是，对于初始表单构建后的任何表单重新构建，mat-datepicker-toggle 的 disabled 属性保持在初始状态（无论是启用还是禁用）。

材料文档状态（我在此处的元素周围使用引号）：

与任何标准“输入元素”一样，可以通过添加 disabled 属性来禁用日期选择器输入。默认情况下，“mat-datepicker”和“mat-datepicker-toggle”将从“输入元素”继承其禁用状态

因此，在重建表单后设置 mat-datepicker-toggle 的禁用/启用状态是我要解决的问题。

我在下面简化了但有效的代码，以显示我最近尝试过的内容。如果您需要更多信息，请告诉我。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MatDatepickerModule, MatIconModule,
  MatInputModule, MatNativeDateModule,} from '@angular/material';

@NgModule({
  exports: [ MatDatepickerModule, MatIconModule,
    MatInputModule, MatNativeDateModule ]
})
export class MaterialModule { }

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, 
MaterialModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { VERSION } from '@angular/material';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  formGroup: FormGroup;
  version = VERSION;
  disableMe = false;
  infamousDate = "2018-08-22T12:34:56.789Z";

  constructor() { }

  ngOnInit() {
    this.rebuildForm();
  }
  rebuildForm() {
    this.disableMe = !this.disableMe;
    this.formGroup = new FormGroup({
      dateJoined: new FormControl(
        { disabled: this.disableMe, value: this.infamousDate })
    });
  }
}

app.component.html

<form class="basic-container" [formGroup]="formGroup">
  <mat-form-field>
    <input matInput [matDatepicker]="dateJoined" placeholder="Date joined" formControlName="dateJoined">
    <mat-datepicker #dateJoined></mat-datepicker>
    <mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle>
  </mat-form-field>
</form>
<button (click)="rebuildForm()">click me</button><hr><span>date enabled: {{!disableMe}}</span>

这是Stackblitz中的相同代码。

标签： angular2-formsangular-material2

解决方案

您需要将 mat-datepicker-toggle 的禁用输入绑定到表单控件的禁用属性：

<mat-datepicker-toggle matSuffix [for]="dateJoined"
    [disabled]="formGroup.controls['dateJoined'].disabled">
</mat-datepicker-toggle>

推荐阅读