Angular Material의 mat-form-field 모양의 기본값 설정

전 기사 : 건강한 ch. 뿌리 t

Angular Material의 양식 필드 mat-form-field는 HTML 태그의 속성으로 스타일을 변경할 수 있습니다.

그러나, 사이트내의 컨트롤의 외관은 고정인 것이 많기 때문에, 모든 컨트롤 태그에 속성을 붙여 가는 것은 힘들고, 역시 바꾸고 싶어진 경우는 한층 더 힘듭니다.

그래서 이번에는 개인적으로 규정치에서 변경하는 경우가 많은 외관 설정 「appearance」와 캡션 표시 방법 「floatLabel」의 기본값을 설정해 보겠습니다.

appearance와 floatLabel의 동작 확인

먼저 다음 코드를 편집하고 결과가 어떻게 바뀌는지 시도해 보십시오.

이미지를 클릭하여 편집할 수 있습니다.

appearance 및 floatLabel의 기본값 설정

appearance나 floatLabel은 HTML 태그로 지정되므로 CSS에서 일괄 지정을 할 수 없습니다. 그래서 예를 들어, appearance의 기본값을 outline, floatLabel의 기본값을 always(타이틀을 항상 위에 표시)로 바꾸고 싶은 경우, 각종 모듈을 임포트하고 있는 개소(위의 예라면 main.ts)에, 이하 의 코드를 추가합니다.

@NgModule({
  ...
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {
      appearance: 'outline',
      floatLabel: 'always', } },
  ]
  ...
})

그러면 다음과 같이 스타일 지정되지 않은 필드의 기본 동작을 변경할 수 있습니다.

이미지를 클릭하여 편집할 수 있습니다.