Angular 레이블 및 입력 지침 개요

    Ignite UI for Angular igx-input-group 구성 요소의 단일 줄 또는 다중 줄 입력 요소를 장식하고 스타일을 지정하는 데 사용됩니다.

    Angular 레이블 및 입력 예제

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 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, IgxInputDirectiveIgxInputGroupComponent 독립 실행형 종속성으로 가져오거나 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 가져왔으므로 igxLabeligxInput 지시문과 igx-input-group 구성 요소를 사용할 수 있습니다.

    Angular 레이블 및 입력 사용

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

    igxInputigxLabel 사용하려면 <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

    EXAMPLE
    TS
    HTML
    SCSS

    데이터 바인딩

    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을 가져와야 합니다.

    EXAMPLE
    TS
    HTML
    SCSS

    입력 그룹

    Ignite UI for Angular 개발자가 사용하기 쉽고 미적인 폼을 만드는 데 도움이 됩니다. 자세한 내용은 여기에서 별도의 주제를 읽을 수 있습니다.

    App Builder | CTA 배너

    API 참조

    추가 리소스

    관련 주제:

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