Angular 레이블 및 입력 지침 개요
Ignite UI for Angular igx-input-group
구성 요소의 단일 줄 또는 다중 줄 입력 요소를 장식하고 스타일을 지정하는 데 사용됩니다.
Angular 레이블 및 입력 예제
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular 시작하기
Ignite UI for Angular 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmd
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 IgxInputGroupModule
당신의 app.module.ts 파일.
// app.module.ts
import { FormsModule } from '@angular/forms';
import { IgxInputGroupModule } from 'igniteui-angular';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxInputGroupModule, FormsModule],
...
})
export class AppModule {}
typescript
또는 16.0.0
부터 IgxLabelDirective
, IgxInputDirective
및 IgxInputGroupComponent
독립 실행형 종속성으로 가져오거나 IGX_INPUT_GROUP_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-input-group>
<input igxInput name="fullName" type="text" [(ngModel)]="fullName" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule],
/* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */
})
export class HomeComponent {
public fullName = 'John Doe';
}
typescript
이제 Ignite UI for Angular 가져왔으므로 igxLabel
및 igxInput
지시문과 igx-input-group
구성 요소를 사용할 수 있습니다.
Angular 레이블 및 입력 사용
라벨 및 입력 지시어의 기본 스타일은 머티리얼 디자인 가이드라인의 텍스트 필드 사양을 따릅니다.
igxInput
및 igxLabel
사용하려면 <igx-input-group>
컨테이너에 래핑해야 합니다.
<igx-input-group>
<input igxInput name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
html
igxInput
지시문은 한 줄 및 여러 줄 텍스트 필드 모두에서 <input>
및 <textarea>
HTML 요소에 적용될 수 있습니다.
확인
우리는 input
사용하여 required
기인하다. 라벨 옆에 별표가 추가되어 이 필드를 반드시 작성해야 함을 나타냅니다. 유효성 검사의 통과/실패 여부에 따라 입력이 녹색/빨간색으로 변합니다.
<igx-input-group>
<input igxInput name="fullName" type="text" required="required" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
html
데이터 바인딩
Ignite UI for Angular 단방향 및 양방향 데이터 바인딩을 모두 지원합니다. 다음 코드는 NgModel
사용하여 양방향 데이터 바인딩을 추가하는 방법을 보여줍니다.
public user = {
fullName: ""
};
typescript
우리 마크업에서:
<igx-input-group>
<input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required"/>
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
html
초점 및 텍스트 선택
강제로 논리를 추가할 수 있습니다. focus
다음을 사용하여 입력 요소에 igxFocus
지령.
<igx-input-group>
<input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
html
igxFocus
지시문을 사용하려면 IgxFocusModule
을 가져와야 합니다.
igxInput
으로 표시된 입력 요소의 텍스트를 선택하려면 igxTextSelection
지시어를 활성화해야 합니다.
<igx-input-group>
<input igxInput [igxTextSelection]="true" [igxFocus]="isFocused" name="fullName" type="text"/>
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
<igx-input-group>
<input igxInput [igxTextSelection]="true" name="email" type="text" />
<label igxLabel for="email">Email</label>
</igx-input-group>
html
igxTextSelection
지시어를 사용하려면 IgxTextSelectionModule
을 가져와야 합니다.
입력 그룹
Ignite UI for Angular 개발자가 사용하기 쉽고 미적인 폼을 만드는 데 도움이 됩니다. 자세한 내용은 여기에서 별도의 주제를 읽을 수 있습니다.
API 참조
추가 리소스
관련 주제:
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.