Angular 레이블 및 입력 지침 개요

    The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an igx-input-group component.

    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/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package


@NgModule({
    ...
    imports: [..., IgxInputGroupModule, FormsModule],
    ...
})
export class AppModule {}

    Alternatively, as of 16.0.0 you can import the IgxLabelDirective, IgxInputDirective, and IgxInputGroupComponent as standalone dependencies, or use the IGX_INPUT_GROUP_DIRECTIVES token to import the component and all of its supporting components and directives.

    // home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// 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';
}

    Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the igxLabel and igxInput directives and the igx-input-group component.

    Using the Angular Label & Input

    라벨 및 입력 지시어의 기본 스타일은 머티리얼 디자인 가이드라인의 텍스트 필드 사양을 따릅니다.

    To use the igxInput and igxLabel, you have to wrap them in an <igx-input-group> container:

    <igx-input-group>
  <input igxInput name="fullName" type="text" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

    The igxInput directive could be applied to <input> and <textarea> HTML elements, in both single-line and multi-line text fields.

    확인

    We can validate an input using the required attribute. This will add an asterisk next to the label, indicating that this field must be completed. The input will turn green/red depending on whether the validation passes/fails.

    <igx-input-group>
  <input igxInput name="fullName" type="text" required="required" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>

    데이터 바인딩

    The Ignite UI for Angular Input directive supports both one-way and two-way data-binding. The following code illustrates how to add a two-way data-binding using the 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

    You can add logic to force focus on input elements using the igxFocus directive.

    <igx-input-group>
  <input igxInput [igxFocus]="isFocused" name="fullName" type="text" />
  <label igxLabel for="fullName">Full Name</label>
</igx-input-group>
    Note

    To use the igxFocus directive, you have to import the IgxFocusModule.

    If you want the text in an input element, marked with igxInput, to be selected on focus, you have to enable the igxTextSelection directive.

    <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

    To use the igxTextSelection directive, you have to import the IgxTextSelectionModule.

    입력 그룹

    Ignite UI for Angular 입력 그룹 구성 요소는 개발자가 사용하기 쉽고 미적인 형태를 만들 수 있도록 돕습니다. 추가 정보는 입력 그룹 문서를 참고하시기 바랍니다.

    API References

    Additional Resources

    관련 주제:

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