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

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.