! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

Angular 반응형 양식에서 Wijmo 컨트롤 사용하기 > 블로그 & Tips

본문 바로가기

Angular 반응형 양식에서 Wijmo 컨트롤 사용하기

페이지 정보

작성자 GrapeCity 작성일 2020-06-19 10:19 조회 7,699회 댓글 0건

본문

Angular Reactive Forms(반응 형 폼)은 기존 템플릿 기반 폼에 대한 모델 기반의 대안을 제공합니다. 템플릿 기반 양식보다 강력하고 확장 가능합니다. 반응 형 양식과 템플릿 기반 양식과의 차이점에 대한 자세한 내용 은 Angular 설명서 의 반응 형 및 템플릿 기반 양식 문서를 참조하십시오.


Wijmo 입력 컨트롤은 두 가지 형식으로 모두 사용할 수 있으며, 다음 두 가지 방법으로 일반적인 이점을 얻을 수 있습니다.



이 포스팅에서는 반응형(Reactive)을 사용하는 간단한 Angular 응용 프로그램에서 표준 입력 요소를 Wijmo 입력 컨트롤을 사용하겨 구현하는 방법을 안내합니다.



1 단계 : 간단한 반응형 양식


Angular 문서 에서 직접 가져온 간단한 반응 형 샘플로 시작하겠습니다 .



app.module.ts 파일은 Angular의 ReactiveFormsModule 을 가져와 양식(Form)에 사용되는 모든 기반을 제공합니다.


my-form.component.ts 파일은 양식을 구동하는 모델을 정의합니다. 모델이 계층 구조를 갖는 방법과 일부 유효성 검사기를 지정하는 방법에 주목하십시오.


export class MyFormComponent {
  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });


그리고 my-form.component.html 에는 양식(Form)을 정의하는 마크 업이 포함되어 있습니다.

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" required>
  </label>
  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
  <div formGroupName="address">
    <h3>Address</h3>
    <label>
      Street:
      <input type="text" formControlName="street">
    </label>


마크업에서 기존 ngModel 지시문 대신 formControlName 속성을 사용하여 바인딩을 지정하는 방법과, formGroupName 속성과 함께 중첩된 div 요소를 사용하여 양식(form)과 모델(model)이 동일한 계층 구조를 갖는 방식에 주목하십시오.


반응형 양식의 기초가 준비되었습니다. 정상적으로 작동하지만 매우 기본적인 기능입니다. 다음 두 단계에서 개선 할 것입니다.



반응형 양식


2 단계 : Wijmo 컨트롤로 HTML 요소 교체


이 단계에서는 폼의 기본 입력 요소를보다 강력한 Wijmo 컨트롤로 대체합니다.



Wijmo를 사용하려면 먼저 Wijmo NPM 패키지에 대한 참조를 추가하십시오. Stackblitz를 사용하고 있기 때문에 프로젝트의 종속성 창에 "Wijmo"를 입력하면됩니다.





독립형 프로젝트에서는 "npm install wijmo"를 명령 행에 입력하여이를 수행합니다.


Wijmo 패키지가 설치 되었으므로 app.module.ts 파일을 변경하여 앱으로 가져옵니다 .


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component';
import { WjInputModule } from 'wijmo/wijmo.angular2.input';

@NgModule({
  declarations: [
    AppComponent,
    MyFormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    WjInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Wijmo 컨트롤을 사용하기 전에 Wijmo의 CSS를 가져와야합니다. Wijmo의 Material(매티리얼) 테마를 애플리케이션에 추가하기 위해 styles.css 파일에 다음을 추가 합니다.


/* Wijmo Styles */
@import "wijmo/styles/themes/wijmo.theme.material.css";
.wj-control {
  background-color: #e7f5f5
}


이제 폼에서 Wijmo의 입력 컨트롤을 사용할 준비가되었습니다. 


 my-form.component.html 파일은 아래와 같습니다.


<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <wj-combo-box formControlName="firstName" required></wj-combo-box>
  </label>
  <label>
    Last Name:
    <wj-combo-box formControlName="lastName"></wj-combo-box>
  </label>
  <label>
    Birthday:
    <wj-input-date formControlName="birthday"
      [isRequired]="false"
      [format]="'MMMM d'"></wj-input-date>
  </label>
  <label>
    Team Size:
    <wj-input-number formControlName="teamsize" required 
      [min]="1" 
      [max]="10" 
      [step]="1"></wj-input-number>
  </label>


드롭 다운 없이도 ComboBox 컨트롤을 사용하여 일반 입력 요소를 대체할 수 있습니다. Wijmo의 스타일을 활용하므로 스타일을 맞춤 설정할 수있어 편리합니다. 


마크업 방법도 주목하십시오.

  1. 입력 요소에만 적용할 수 있는 required 속성 대신 Wijmo 입력 컨트롤의 isRequired 속성을 사용합니다 .
  2. InputDate 컨트롤의 날짜 형식을 원하는 형식으로 표시합니다 (이 경우에는 일 및 월만 ).
  3. 사용자가 유효한 범위 밖의 값을 입력할 수 없도록 InputNumber 컨트롤 의 최소값(min) 및 최대값(max)을 지정 합니다.


InputDate , InputNumber 및 콤보 상자 컨트롤은 데이터 입력이 편리하며 오류가 발생할 가능성이 적습니다.





3 단계 : 검증 된 유효성 검사 및 스타일링


이 단계에서는 양식의 유용성을 크게 향상시키기 위해 몇 가지 스타일을 추가합니다.



프로젝트에 wijmo.labeled-input.css 라는 새 CSS 파일을 추가 하고 styles.css 파일에서, 이를 참조하여 시작합니다.





wijmo.labeled-input.css 파일에는 애니메이션이 적용된 떠다니는 레이블 및 포커스 요소와 같은 기능을 Wijmo의 입력 컨트롤에 구현하기 위한, Wijmo의 내장 의사 선택기(pseudo-selectors)를 활용하는 CSS 규칙이 포함되어 있습니다.


새로운 스타일을 사용하려면 my-form.component.html 에서 마크업을 변경하고, 각 입력 요소를 div의 wj-labeled-input 클래스로 래핑 해야합니다 .


<form [formGroup]="profileForm" ngNativeValidate (ngSubmit)="onSubmit()">
  <h3>Personal Info</h3>
  <div class="wj-labeled-input">
    <wj-combo-box formControlName="firstName"></wj-combo-box>
    <label>First Name</label>
    <div class="wj-error" tabindex="-1">Please tell us your first name</div>
  </div>
  <div class="wj-labeled-input">
    <wj-combo-box formControlName="lastName"></wj-combo-box>
    <label>Last Name</label>
    <div class="wj-error" tabindex="-1">Please tell us your last name</div>
  </div>
  <div class="wj-labeled-input">
    <wj-input-date formControlName="birthday"
      [isRequired]="false"
      [format]="'MMMM d'"></wj-input-date>
    <label>Birthday</label>
  </div>
  <div class="wj-labeled-input narrow">
    <wj-input-number formControlName="teamsize"
      [isRequired]="false"
      [min]="1" 
      [max]="10" 
      [step]="1"></wj-input-number>
    <label>Team Size</label>
  </div>


wj-labeled-input  요소는 아래를 포함합니다 :


  1. 값을 편집하는 데 사용되는 Wijmo 입력 컨트롤
  2. 컨트롤이 비어있을 때 placeholder 로 사용되거나, 또는 내용이있을 때 캡션으로 사용되는 레이블 요소
  3. 컨트롤이 터치되어 졌을때, 유효하지 않은 생태일때 보여지는 선택적 에러 요소 


개선 된 스타일


새로운 CSS 및 조정된 마크업은 양식을 반응형으로 만듭니다 (대형 화면에서 사용 가능한 공간을 더 잘 활용합니다).


또한 입력 컨트롤이 비어있을 때 Placeholder가 역할을하고, 입력 컨트롤에 내용이 있거나, 포커싱이 되면, 캡션(Caption)으로 바뀌는 레이블이있는 Material Design Style 입력 패널을 구현합니다.


포커싱된 컨트롤을 나타내는 애니메이션을 통해 접근성이 향상시킵니다.





개선된 유효성 검사


앱의 원래 버전은이 마크업을 사용하여 양식이 유효할 때까지, 제출 버튼을 비활성화했습니다.


<button type="submit" [disabled]="!profileForm.valid">
    Submit
</button>


이 방법은 효과가 있지만 비활성화된 제출 버튼을 보는 것이 실망스럽고, 양식(form)에 어떤부분이 잘못 되었는지 나타내는 표시가 없습니다.


이 상황을 해결하기 위해 최신 버전의 앱에서는 제출 버튼에서 disabled 속성을 제거하고 ngNativeValidate 지시문을 양식에 추가했습니다 .


<form [formGroup]="profileForm" ngNativeValidate (ngSubmit)="onSubmit()">


이를 통해 사용자는 제출 양식을 클릭하고 유효하지 않은 필드를 표시하는 오류 메시지를 얻을 수 있습니다.





또한 CSS를 사용하여 필수 필드에 빨간색 별표를 추가했습니다. 새로운 양식은 이전 양식보다 훨씬 매력적이고 사용하기 쉽습니다.





  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.