반응식을 사용할 때 mat-datepicker에서 텍스트 입력 사용 안 함

Question

각도 재료 2의 mat-datepicker을 사용하고 사용자가 텍스트 입력을 사용하여 값을 편집 할 수 없도록 input 요소를 사용하지 않기를 원합니다.

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 속성을 사용하는 것 같습니다. 구성 요소 클래스 에이 컨트롤을 설정할 때 사용 안 함을 true로 설정하면 disabled 속성이 실제로 에 설정됩니다. 이 방법을 사용하여 '변경 후 변경됨'오류가 발생하지 않도록하는 것이 좋습니다. 예 : form = new FormGroup ({첫 번째 : 새 FormControl ({값 : '낸시', 비활성화 됨 : true})));

난 당신이 다음 this.form.value 장애인 폼 컨트롤을 사용하여 FormGroup의 값을 얻는 경우에, 그러나, 입력을 비활성화 원하는 효과를 가지고 FormControl를 비활성화 할 수있는 구성 요소에 FormGroup 업데이트는 더 이상 존재하지 않습니다.

ngModel을 mattempicker (s) 용으로 사용하는 별도의 템플릿 구동 양식이 필요하지 않은 문제가 있습니까?

Answer 1

사용하지 않도록 설정하려면 FormControl 정말 간단합니다.

1 - 템플릿에서 disabled 속성을 사용하지 마십시오.

2 - 인스턴스화하여 FormGroup 다음과 같습니다 : 당신이 입력에 뭔가를 입력하지 못하도록하려는 있지만, 당신은 여전히 ​​그들을 클릭하여 날짜를 선택할 수 있도록 할 있음을 의미하며,

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

---

버튼 (구체적으로 matSuffix에 있음), 맞습니까?

올바른 경우 모든 입력 (matSuffix의 버튼 포함)이 사용 중지되므로이 경우에는 disable이 작동하지 않습니다.

사례를 해결하려면 readonly을 사용할 수 있습니다. 템플릿에 일반적으로 다음 FormGroup를 인스턴스화 :

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

DEMO