Angular 라벨 및 입력 지시어 개요
Ignite UI for Angular igx-input-group
구성 요소에서 한 줄 또는 여러 줄 입력 요소를 장식하고 스타일을 지정하는 데 사용됩니다.
Angular Label & Input Example
Getting Started with Ignite UI for Angular Label & Input
Ignite UI for Angular 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
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 {}
또는 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';
}
이제 Ignite UI for Angular 모듈 또는 지시문을 가져왔으므로 igxLabel
및 igxInput
지시문과 igx-input-group
구성 요소 사용을 시작할 수 있습니다.
Using the Angular Label & Input
라벨 및 입력 지시어의 기본 스타일은 머티리얼 디자인 가이드라인의 텍스트 필드 사양을 따릅니다.
igxInput
및 igxLabel
사용하려면 <igx-input-group>
컨테이너에 래핑해야 합니다.
<igx-input-group>
<input igxInput name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
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>
Data Binding
Ignite UI for Angular 단방향 및 양방향 데이터 바인딩을 모두 지원합니다. 다음 코드는 NgModel
사용하여 양방향 데이터 바인딩을 추가하는 방법을 보여줍니다.
public user = {
fullName: ""
};
우리 마크업에서:
<igx-input-group>
<input igxInput name="fullName" type="text" [(ngModel)]="user.fullName" required="required" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
Focus & Text Selection
강제로 논리를 추가할 수 있습니다. focus
다음을 사용하여 입력 요소에 igxFocus
지령.
<igx-input-group>
<input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
<label igxLabel for="fullName">Full Name</label>
</igx-input-group>
Note
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>
Note
igxTextSelection
지시어를 사용하려면 IgxTextSelectionModule
을 가져와야 합니다.
입력 그룹
Ignite UI for Angular 개발자가 사용하기 쉽고 미적인 양식을 만드는 데 도움이 됩니다. 자세한 내용은 여기에서 별도의 항목을 읽어보세요.
API References
Additional Resources
관련 주제:
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.