リアクティブフォームを使用しているときにmat-datepickerでテキスト入力を無効にする

Question

角材2のmat-datepickerを使用していて、ユーザーがテキスト入力を使用して値を編集できないように入力要素を無効にします。

mat-datepickerのさまざまな部分を無効にする方法については、detailed instructions in the Angular Material 2 docsがありますが、これらは反応するフォームの一部である場合にテキスト入力を無効にする方法をカバーしていないようです。

角度素材のドキュメントでは、次のようにテキスト入力を無効にお勧め：

<mat-form-field> 
       // Add the disabled attribute to the input element ====== 
       <input disabled       
        matInput 
        [matDatepicker]="dateJoined" 
        placeholder="Date joined" 
        formControlName="dateJoined"> 
       <mat-datepicker-toggle matSuffix [for]="dateJoined"></mat-datepicker-toggle> 

       // Add [disabled]=false to the mat-datepicker ======= 
       <mat-datepicker [disabled]="false" 
           startView="year" 
           #dateJoined></mat-datepicker> 
      </mat-form-field> 

しかし、あなたの日付ピッカーは反応型の一部である場合は、テキスト要素がアクティブのままで、あなたが角度から、次のメッセージが表示されます：

反応型の 指令でdisabled属性を使用しているようです。このコントロールを コンポーネントクラスに設定したときにdisabledをtrueに設定した場合、disabled属性は実際にはDOMの に設定されます。この方法を使用して、「変更後に 変更しました」というエラーを避けることをおすすめします。 例： form = new FormGroup（{最初：新しいFormControl（{値： 'Nancy'、無効：true}）））;

私はあなたがしてthis.form.value無効フォームコントロールを使用してFormGroupの値を取得する場合、ただし、入力を無効にする所望の効果を有するFormControlを、無効にするコンポーネントにFormGroup更新はもはや存在しません。

ngModelをmatt- datepicker（s）のためだけに使用して別のテンプレート駆動フォームを使用しないようにするための回避策がありますか？

Answer 1

無効にするにはFormControlを作成するのはとても簡単です。

1 - テンプレートにdisabled属性を使用しないでください。

2 - このようなあなたのFormGroupをインスタンス化：あなたが入力で何かを入力してからユーザーを防ぐためにしたいが、あなたはまだそれらをクリックして日付を選択できるようにしたい、言われていること

this.formGroup = this.formBuilder.group({ 
    dateJoined: { disabled: true, value: '' } 
    // ... 
}); 

---

ボタン（より具体的にはmatSuffix）、右か？

この場合、はすべての入力（matSuffixのボタンを含む）を無効にするため、このケースでは機能しません。

あなたのケースを解決するには、readonlyを使用できます。テンプレートには、通常、その後FormGroupをインスタンス化：

<input       
    matInput 
    readonly <- HERE 
    [matDatepicker]="dateJoined" 
    placeholder="Date joined" 
    formControlName="dateJoined"> 

DEMO