Input Angular 웹앱에 입력 마스크와 유효성 검사 추가하기
페이지 정보
작성자 GrapeCity 작성일 2022-08-22 14:37 조회 477회 댓글 0건본문
관련링크
양식 요소는 웹사이트에서 사용자로부터 필요로 하는 정보를 수집하는 일반적인 방법입니다. 일반적으로 <input> 요소, 체크박스, 라디오 버튼 및 사용자가 입력한 정보를 제출하기 위한 버튼으로 구성되어 있습니다.
하지만 표준 <input> 요소를 통해 사용자는 원하는 것은 무엇이든 입력할 수 있으며 입력한 정보를 표준화하려는 경우 해당 기능을 구현할 개발자에게 달려 있습니다.
여기서 InputMask가 수신됩니다. 의 Angular InputMask 컨트롤을 통해 개발자는 입력 필드에 대해 마스크와 사전 정의된 형식을 빠르게 구현할 수 있습니다. 이는 사용자가 마스크에 입력할 수 있는 문자 수, 컨트롤에 표시된 프롬프트 문자 및 컨트롤을 통해 사용자가 숫자, 글자 또는 모두를 입력할 수 있는지 여부를 제한할 수 있습니다.
이 문서에서는 다음 단계를 간략하게 설명합니다.
Angular 양식 만들기
Wijmo의 Angular InputMask 구현
마스크 및 프롬프트 문자 정의
사용자의 정보 유효성 검사
스스로 프로젝트를 다운로드하려는 경우 에서 찾을 수 있습니다.
Angular 양식 만들기
InputMask 컨트롤 구현에 대해 알아보기 전에 InputMask를 사용할 <form> 요소를 만들어야 합니다.
Angular의 FormsModule 및 ReactiveFormsModule 모듈을 사용할 것이므로 app.module.ts 파일에서 가져오겠습니다.
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ... imports: [ BrowserModule, FormsModule, ReactiveFormsModule ]
이제 필요한 모듈을 가져왔으며 app.component.html 파일로 이동하여 양식의 마크업을 추가하겠습니다.
<div class="form-control"> <div class="form-header"> <span>User Information</span> </div> <form class="form-body" [formGroup]="infoForm" (ngSubmit)="onSubmit()"> <div class="form-footer"> <button class="form-button" type="submit">Submit</button> </div> </form> </div>
Angular의 FormGroup을 사용하여 양식에서 데이터를 집계하고 ngSubmit을 사용하여 양식을 제출하는 경우를 처리합니다.
다음으로 app.component.ts 파일을 열어 FormGroup을 만들겠습니다.
import { FormBuilder } from '@angular/forms'; ... export class AppComponent { importForm = this.formBuilder.group({ name: '', email: '', phone: '', social: '' }); constructor(private formBuilder: FormBuilder) {} onSubmit(): void { this.inputForm.reset(); } }
여기에서는 FormBuilder를 사용하여 양식에서 다양한 모든 InputMask에 대한 값을 관리할 importForm을 만듭니다. 이 경우 사용자에게 이름, 이메일, 전화번호 및 주민 등록 번호를 요청합니다.
이 섹션에서 수행할 마지막 작업은 양식의 스타일을 추가하는 것입니다.
app.component.css 파일을 열고 다음 CSS를 추가합니다.
.form-control { position: absolute; width: 400px; height: 300px; z-index: 15; top: 50%; left: 50%; margin: -150px 0 0 -200px; border-radius: 15px; box-shadow: 1px 0 5px -2px rgb(90, 90, 90); text-align: center; } .form-header { height: 50px; width: 100%; line-height: 50px; border-top-left-radius: 15px; border-top-right-radius: 15px; background: rgb(100, 100, 252); font-weight: bold; font-size: larger; color: white; } .form-body { height: 100%; position: relative; } .form-footer { position: absolute; bottom: 75px; right: 2px; height: 50px; width: 100% } .form-button { float: right; margin-top: 10px; margin-right: 10px; height: 40px; width: 100px; border-radius: 10px; border: 1px solid black; background: rgb(100, 100, 252); color: white; font-size: 16px; } .form-button:hover { cursor: pointer; background: rgb(140, 140, 255); }
방금 작성한 CSS는 페이지에서 양식을 중간으로 지정하고 헤더, 푸터 및 버튼 요소의 스타일을 지정합니다. 이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.
Wijmo의 Angular InputMask 구현
이제 양식이 만들어졌으며 InputMask를 추가할 시간입니다. Wijmo를 사용하려면 라이브러리를 프로젝트에 추가해야 합니다.
명령 프롬프트를 열고 프로젝트가 저장된 위치로 이동하고 다음을 실행합니다.
npm i @grapecity/wijmo.angular2.all
NPM에서 모든 파일을 설치하고 나면 app.module.ts 파일이 열리고 다음 모듈을 가져옵니다.
import { WjInputModule } from '@grapecity/wijmo.angular2.input'; ... import: [ BrowserModule, FormsModule, ReactiveFormsModule, WjInputModule ]
마지막 작업은 Wijmo의 CSS 라이브러리를 응용 프로그램에 추가하는 것입니다. styles.css 파일을 열고 다음을 추가합니다.
@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css'; body { box-sizing: boder-box; font-family: sans-serif; }
모든 작업이 완료되면 이제 Wijmo의 Angular InputMask를 사용할 수 있습니다. app.component.html으로 이동하고 다음 마크업을 <form> 요소 내부에 추가합니다.
<div class="form-element"> <wj-input-mask #name id="name" [placeholder]="'Name'" formControlName="name"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask #email id="email" [placeholder]="'Email'" formControlName="email"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask #phone id="phone" [placeholder]="'Phone Number'" formControlName="phone"></wj-input-mask> </div> <div class="form-element"> <wj-input-mask #social id="social" [placeholder]="'Social Security Number'" formControlName="social"></wj-input-mask> </div>
여기에서는 4개의 InputMask, 즉 이름, 이메일, 전화번호 및 주민 등록 번호당 하나씩을 구현하겠습니다. 또한 각 마스크의 자리 표시자 값도 설정하고 formControlName 속성을 사용하여 app.component.ts 파일에서 inputForm 개체에 시도해보겠습니다.
마지막으로 해야 할 작업은 일부 CSS를 추가하여 InputMask의 스타일을 지정하는 것입니다.
.form-element { text-align: center; margin-top: 15px; width: 100%; }
이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.
마스크 및 프롬프트 문자 정의
이제 InputMask를 구현했으며 컨트롤의 마스크 및 프롬프트 문자를 설정하는 방법에 대해 살펴보겠습니다. 이 샘플에서는 전화번호 및 주민 등록 번호 입력에 대한 마스크와 프롬프트 문자를 정의하려고 합니다.
이러한 InputMask 모두에 대한 마크업을 수정하겠습니다.
<wj-input-mask #phone id="phone" [mask]="'000-000-0000'" [placeholder]="'Phone Number'" [isRequired]="false" [promptChar]="'#'" [value]="''" formControlName="phone"></wj-input-mask> <wj-input-mask #social id="social" [mask]="'000-00-0000'" [placeholder]="'Social Security Number'" [isRequired]="false" [promptChar]="'*'" [value]="''" formControlName="social"></wj-input-mask>
마스크 속성에서 숫자를 사용하여 InputMask에 컨트롤에서 입력할 때 숫자와 사용자가 입력해야 할 문자 수만 허용하려는 것을 알리겠습니다.
prompChar 속성을 설정하면 계속 입력이 필요한 값을 표시하려고 하는 문자를 컨트롤에 알립니다. 마지막으로 isRequired 및 값 속성을 설정하면 자리 표시자가 프롬프트 문자를 표시하도록 기본값을 설정하는 대신 계속해서 표시할 수 있습니다.
이제 응용 프로그램을 실행하고 전화나 주민 등록 InputMask에 입력을 시작하면 다음과 같아집니다.
보시다시피 이러한 InputMask에 입력하면 컨트롤에서 예상하는 나머지 문자에 대해 프롬프트 문자가 표시됩니다.
사용자의 정보 유효성 검사
이 문서에서 알아볼 마지막 사항은 사용자의 정보를 유효성 검사하는 방법입니다.
이 양식의 경우 "이름" 및 "이메일" InputMask에 입력을 정보하고 "전화번호" 및 "주민 등록 번호" InputMask가 완전히 작성되었는지 확인하고자 합니다.
첫 번째로 할 일은 사용자가 마지막 2개의 InputMask를 완전히 작성해야 한다는 것을 아는지 확인하는 것입니다. 이를 위해 Wijmo의 Angular InputMask valueChanged 이벤트를 사용하겠습니다.
마크업 내부에서 이벤트를 컨트롤에 추가합니다.
<wj-input-mask #phone id="phone" [mask]="'000-000-0000'" [placeholder]="'Phone Number'" [isRequired]="false" [promptChar]="'#'" [value]="''" (valueChanged)="validateInput(phone)" formControlName="phone"></wj-input-mask> <wj-input-mask #social id="social" [mask]="'000-00-0000'" [placeholder]="'Social Security Number'" [isRequired]="false" [promptChar]="'*'" [value]="''" (valueChanged)="validateInput(social)" formControlName="social"></wj-input-mask>
이제 app.component.ts 파일 내에서 다음 메서드를 구현해보겠습니다.
import * as wjCore from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.input'; import * as wjcInput from '@grapecity/wijmo.angular2.input'; validateInput(control: wjInput.InputMask) { wjCore.toggleClass(control.hostElement, 'state-invalid', !control.maskFull); }
이 메서드는 InputMask의 maskFull 속성이 true를 반환하는지 확인합니다. maskFull은 사용자가 마스크에서 필요한 문자 수를 입력한 경우 true를 반환하며 그렇지 않은 경우 false를 반환하는 부울 값입니다. true를 반환하지 않으면 state-invalid라는 CSS 클래스를 컨트롤에 추가합니다.
CSS 클래스를 app.component.css 파일에 추가해보겠습니다.
.state-invalid { color: red; }
이제 "전화번호" 또는 "주민 등록 번호" InputMask에 입력하면 다음 내용이 표시됩니다.
보시다시피 마스크가 완전히 작성되지 않은 경우 텍스트는 빨간색으로 표시됩니다.
다음으로 사용자가 모든 InputMask를 작성했는지 확인할 메서드를 추가하고 양식을 제출할지 여부를 결정할 onSubmit() 메서드를 업데이트하겠습니다.
@ViewChild('name') name: wjcInput.WjInputMask; @ViewChild('email') email: wjcInput.WjInputMask; @ViewChild('phone') phone: wjcInput.WjInputMask; @ViewChild('social') social: wjcInput.WjInputMask; isFormComplete() { if(this.name.value != '' && this.email.value != '' && this.phone.maskFull && this.social.maskFull) { return true } return false; } onSubmit(): void { if(this.isFormComplete()) { // Display user info on form submission alert('User Information:\nName: ' + this.inputForm.value.name + '\nEmail: ' + this.inputForm.value.email + '\nPhone Number: ' + this.inputForm.value.phone + '\nSSN: ' + this.inputForm.value.phone); this.inputForm.reset(); } }
이제 앱을 실행하고 모든 InputMask를 작성하는 경우 다음 경고가 표시됩니다.
결론
보시다시피 Angular Forms 및 Wijmo의 Angular InputMask 컨트롤을 사용하여 양식을 쉽게 빌드할 수 있습니다. 더 많은 정보를 위해 개발자를 위한 , 및 가 준비되어 있습니다.
샘플 응용 프로그램
Wijmo에서 제공하는 더 많은 사항에 관심이 있다면 에서 라이브러리를 다운로드할 수 있습니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.