반응형
AngularJS를 사용한 폼 입력은 어떻게 조건부로 요구합니까?
Angular를 사용하여 주소록 애플리케이션(예제)을 구축한다고 가정합니다.JS.
이메일과 전화번호 입력이 있는 연락처용 폼이 있습니다.둘 다 필요 없지만 둘 중 하나가 필요합니다.우리는 단지email
필요한 입력은 다음과 같습니다.phone
입력이 비어 있거나 유효하지 않으며, 그 반대도 마찬가지입니다.
Angular는required
지시문입니다만, 이 경우의 사용 방법에 대해서는 설명서에서 명확하지 않습니다.그럼 어떻게 폼필드를 조건부로 요구할 수 있을까요?커스텀 디렉티브를 작성하시겠습니까?
커스텀 디렉티브를 작성할 필요는 없습니다.Angular의 문서는 양호하지만 완전하지는 않습니다.사실, 이런 지시가 있습니다.ngRequired
Angular 표현식을 사용합니다.
<input type='email'
name='email'
ng-model='contact.email'
placeholder='your@email.com'
ng-required='!contact.phone' />
<input type='text'
ng-model='contact.phone'
placeholder='(xxx) xxx-xxxx'
ng-required='!contact.email' />
다음은 보다 완전한 예를 제시하겠습니다.
입력이 필요한 경우 다른 입력이 필요합니다.
<input type='text'
name='name'
ng-model='person.name'/>
<input type='text'
ng-model='person.lastname'
ng-required='person.name' />
안부 전해요.
Angular2의 경우
<input type='email'
[(ngModel)]='contact.email'
[required]='!contact.phone' >
간단하게 다음과 같은 각도 검증을 사용할 수 있습니다.
<input type='text'
name='name'
ng-model='person.name'
ng-required='!person.lastname'/>
<input type='text'
name='lastname'
ng-model='person.lastname'
ng-required='!person.name' />
이제 하나의 텍스트 필드에만 값을 입력할 수 있습니다.이름 또는 성을 입력할 수 있습니다.이 방법으로 AngularJs의 조건부 필수 채우기를 사용할 수 있습니다.
AngularJS(버전 1.x)에는 빌트인 디렉티브가 있습니다.ngRequired
<input type='email'
name='email'
ng-model='user.email'
placeholder='your@email.com'
ng-required='!user.phone' />
<input type='text'
ng-model='user.phone'
placeholder='(xxx) xxx-xxxx'
ng-required='!user.email' />
Angular2 이상
<input type='email'
name='email'
[(ngModel)]='user.email'
placeholder='your@email.com'
[required]='!user.phone' />
<input type='text'
[(ngModel)]='user.phone'
placeholder='(xxx) xxx-xxxx'
[required]='!user.email' />
각도 2의 경우
<input [(ngModel)]='email' [required]='!phone' />
<input [(ngModel)]='phone' [required]='!email' />
언급URL : https://stackoverflow.com/questions/13466133/how-can-i-conditionally-require-form-inputs-with-angularjs
반응형
'programing' 카테고리의 다른 글
Angular와 함께 확인란 사용JS (0) | 2023.03.25 |
---|---|
웹 컴포넌트, 데이터 송수신 (0) | 2023.03.25 |
Elastic Search 벌크 인덱스 JSON 데이터 (0) | 2023.03.25 |
restore 가능한 스냅숏을 작성하기 위해 window.down 및 restore가 가능합니다. (0) | 2023.03.25 |
Next.js가 '@types/react'를 인식하지 않습니다. (0) | 2023.03.25 |