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/input-group';
// 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/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';
}

    이제 Ignite UI for Angular 입력 그룹 모듈이나 디렉티브를 가져왔으니, andigxLabel 디렉티브와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이 지시는 단일 줄 및 다중 줄 텍스트 필드 모두에서 HTML 요소에<input>​<textarea> 적용할 수 있었습니다.

    확인

    우리는 다음과 같은 것을 검증할 수 있습니다.input​required 속성. 이 경우 라벨 옆에 별표가 추가되어 해당 필드를 완료해야 함을 나타냅니다. 입력은 검증이 통과하거나 실패했는지에 따라 초록색/빨간색으로 변합니다.

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

    데이터 바인딩

    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

    관련 주제:

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