Отключить ввод текста на mat-datepicker при использовании реактивной формы

Я использую Angle Material 2 mat-datepicker и хочу, чтобы элемент ввода был отключен, поэтому пользователь не может редактировать значение с помощью ввода текста.

В документах Angular Material 2 есть подробные инструкции о том, как отключить разные части mat-datepicker однако они, похоже, не охватывают, как отключить ввод текста, когда он является частью реактивной формы.

Документы "Угловой материал" предлагают отключить ввод текста следующим образом:

<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>

Однако, если ваш фидпик является частью реактивной формы, текстовый элемент остается активным, и вы получаете следующее сообщение от Angular:

Похоже, вы используете отключенный атрибут с директивой реактивной формы. Если вы установите для параметра disabled значение true при настройке этого элемента управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок "изменено после проверки". Пример: form = new FormGroup ({first: new FormControl ({значение: 'Nancy', disabled: true})};

Я обновил FormGroup в компоненте, чтобы отключить FormControl, который имеет желаемый эффект от отключения ввода, однако, если вы затем получите значение FormGroup используя this.form.value отключенный элемент управления формы больше не присутствует.

Есть ли работа для этого, которая не предполагает наличия отдельной формы с ngModel использующей ngModel только для mat-datepicker (s)?

Ответ 1

Для создания отключенного FormControl очень просто.

1 - Не используйте отключенный атрибут в своем шаблоне;

2 - FormGroup свою FormGroup следующим образом:

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

При этом, хотя вы хотите, чтобы пользователи не вводили что-то во входные данные, вы все же хотите позволить им выбрать дату, нажав кнопку (более конкретно в matSuffix), правильно?

Если это правильно, disable не работает для этого случая, потому что он отключит все входные данные (включая кнопку в matSuffix).

Чтобы решить ваше дело, вы можете использовать readonly. FormGroup как обычно, а затем в шаблоне:

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

DEMO

Ответ 2

Чтобы развернуть ответ developer033, чтобы динамически переключать состояние readonly в input, измените свойство readonly с помощью переменной компонента.

Динамически переключать только для чтения

Смотрите Stackblitz Demo.

app.component.html

<input matInput 
  [readonly]="inputReadonly"   <!-- Update 'readonly' property using variable -->
  [matDatepicker]="dateJoined" 
  placeholder="Date joined" 
  formControlName="dateJoined">

app.component.ts

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

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  formGroup: FormGroup;
  inputReadonly = true;
  version = VERSION;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      dateJoined: ''
    });
  }

  public toggleInputReadonly() {
    this.inputReadonly = !this.inputReadonly;
  }
}

Ответ 3

Меня устраивает. Я попробовал с примером из угловых материалов документов. Но пример углового материала не отвечает моим требованиям.