Deshabilitar (hacer de solo lectura) la entrada de texto en mat-datepicker cuando se usa un formulario reactivo

Te damos la bienvenida a nuestro espacio, ahora hallarás la respuesta de lo que buscabas.

Solución:

Para crear un discapacitado FormControl es realmente simple

1 – No usar deshabilitado attribute en tu plantilla;

2 – Crea una instancia de tu FormGroup Me gusta esto:

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

---

Dicho esto, aunque desea evitar que los usuarios escriban algo en la entrada, aún desea permitirles seleccionar una fecha haciendo clic en el botón (más específicamente en matSuffix), ¿Correcto?

si es correcto, disable no funciona para este caso, porque deshabilitará todas las entradas (incluido el botón en matSuffix).

Para resolver tu caso, puedes usar readonly. Instanciar el FormGroup normalmente y luego en la plantilla:

MANIFESTACIÓN

Para ampliar la respuesta de developer033, para alternar dinámicamente el readonly estado de inputmodificar el readonly propiedad utilizando una variable de componente.

Alternar dinámicamente solo lectura

Ver Demostración de Stackblitz.

aplicación.componente.html

  [matDatepicker]="dateJoined" 
  placeholder="Date joined" 
  formControlName="dateJoined">

aplicación.componente.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;
  

Finalizando este artículo puedes encontrar las notas de otros administradores, tú de igual manera tienes el poder mostrar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador