Option 
  모양 속성 예제가 있는 양식 필드  
 
이 예에서는 양식 필드 모양 속성 사용법을 보여줍니다. 이전 예제를 주석 처리하고 이러한 HTML 태그를 |_+_|에 추가할 수 있습니다.
중앙값의 표준 오차
src/app/app.component.scss
  부동 레이블 및 필수 마커 숨기기  
 
부동 레이블 모드를 구성하고 필요한 마커(별표)를 숨기는 속성이 있습니다. 여기에 그들에 대한 예가 있습니다.
.form-container { display: flex; flex-direction: column; } .form-container > * { width: 100%; } 
부동 레이블을 전역적으로 구성하려면 이 MAT_LABEL_GLOBAL_OPTIONS 가져오기를 |_+_|에 추가할 수 있습니다.
엔캐시 어디서 살 수 있어?
src/app/app.component.html
@NgModule 제공자에 추가하십시오.
 
 Email Address: mail_outline Input the fully qualified email address 
 
 Phone Number: phone Phone number with Country code 
 
 Username: person_outline Use unique username 
 
 Password lock Min 8 char 1 number and 1 alpha 
 
전역 구성을 사용할 각각의 모든 [floatLabel] 속성을 제거합니다.
 
  힌트 레이블 표시  
 
align 속성을 이용하여 좌우 특정 위치에 힌트를 표시하는 컴포넌트를 사용한 힌트 라벨의 예입니다.
 Last Name Nickname Family Name 
  오류 메시지 표시  
 
이 예에서는 입력을 입력하거나 채우는 동안 문제가 발생한 경우 오류 메시지를 표시하는 방법을 보여줍니다. 오류 메시지는 입력 아래에 표시되며 오류가 발견되지 않으면 기본적으로 숨겨집니다. 이 예제에서는 Angular FormControl 유효성 검사기를 사용합니다. 이를 위해 |_+_|를 열고 편집합니다. 그런 다음 이 가져오기를 추가하십시오.
src/app/app.module.ts
FormControl 및 유효성 검사기의 변수를 추가합니다.
import { MAT_LABEL_GLOBAL_OPTIONS } from '@angular/material/core'; 
오류 메시지를 표시하는 기능을 추가합니다.
providers: [ { provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'} } ], 
HTML로 돌아가서 이전 예제에 주석을 달고 이 오류 메시지 예제를 추가하십시오.
비트코인 스톰 합법적인 보너스
 Estimate: {(20 - input.value?.length) } Fill with the valid email ^ 
  접두사/접미사 또는 레이블 앞/뒤  
 
양식 필드는 입력 전후에 레이블을 표시할 수 있습니다. 접두사 또는 matPrefix 속성 및 접미사 사용 전 또는 matSuffix 사용 후. 다음은 예입니다.
src/app/app.component.ts
  양식 필드 스타일 지정  
 
스타일은 mat-form-field 및 .mat-form-field의 스타일을 변경하여 재정의하거나 변경할 수 있습니다. 재정의하려면 |_+_|를 열고 편집하십시오. 그런 다음 이 스타일을 추가합니다.
import { FormControl, Validators } from '@angular/forms'; 
 
  입력 예  
 
표준 HTML 입력 및 텍스트 영역에 추가된 matInput으로 표시된 Angular Material 입력 또는 텍스트 영역입니다. 그러면 HTML 입력 및 텍스트 영역이 내부에서 작동합니다.
 
  기본 입력 및 TextArea 예제  
 
이 예제는 HTML 입력 내부의 Angular Material matInput 및 로 래핑된 텍스트 영역의 기본 사용법입니다.
email = new FormControl('', [Validators.required, Validators.email]); 
  지원되는 입력 유형 예  
 
이 예제는 text, color, date, datetime-local, email, month, number, password, search, tel, time, url, week와 같은 입력 mapInput에 대해 지원되는 유형입니다.
getErrorMessage() { return this.email.hasError('required') ? 'You must enter a value' : this.email.hasError('email') ? 'Not a valid email' : ''; } 
  사용자 정의 ErrorStateMatcher로 입력  
 
실패 입력 사용은 사용자 정의 ErrorStateMatcher를 사용하여 입력 하단에 표시되는 오류를 발생시킬 수 있습니다. 에서 오류 메시지 사용을 허용합니다. ErrorStateMatcher를 사용하려면 이러한 가져오기를 |_+_|에 추가/수정하십시오.
 {{getErrorMessage()}} 
주 @Component 앞에 이 ErrorStateMatcher 클래스를 추가하십시오.
 Rp. .00 
이 FormControl 유효성 검사기를 추가하고 AppComponent 브래킷 안에 ErrorStateMatcher를 인스턴스화합니다.
src/app/app.component.scss
 
돌아가기 |_+_| 그런 다음 이 ErrorStateMatcher 사용 예를 추가하십시오.
로드 러너 이메일 주소
mat-form-field.mat-form-field { font-size: 16px; color: blue; background-color: burlywood; border: solid 1px #c0c0ff; } 
Angular Material Form Controls, Form Field 및 Input의 예입니다. 평소와 같이 당사에서 전체 소스 코드를 얻을 수 있습니다. 깃허브 .
 
웹 디자이너를 고용하여 자신의 프론트 엔드를 디자인하거나 예산을 낭비하고 싶지 않다면 Angular 템플릿이 가장 좋은 곳입니다. 따라서 프리미엄으로 프론트엔드 웹 개발 속도를 높이십시오. 각도 템플릿 . 프런트 엔드 프로젝트에 사용할 템플릿 선택 여기 .
 
#angular #웹 개발 #자바스크립트