programing

AngularJS를 사용한 폼 입력은 어떻게 조건부로 요구합니까?

oldcodes 2023. 3. 25. 11:52
반응형

AngularJS를 사용한 폼 입력은 어떻게 조건부로 요구합니까?

Angular를 사용하여 주소록 애플리케이션(예제)을 구축한다고 가정합니다.JS.

이메일과 전화번호 입력이 있는 연락처용 폼이 있습니다.둘 다 필요 없지만 둘 중 하나가 필요합니다.우리는 단지email필요한 입력은 다음과 같습니다.phone입력이 비어 있거나 유효하지 않으며, 그 반대도 마찬가지입니다.

Angular는required지시문입니다만, 이 경우의 사용 방법에 대해서는 설명서에서 명확하지 않습니다.그럼 어떻게 폼필드를 조건부로 요구할 수 있을까요?커스텀 디렉티브를 작성하시겠습니까?

커스텀 디렉티브를 작성할 필요는 없습니다.Angular의 문서는 양호하지만 완전하지는 않습니다.사실, 이런 지시가 있습니다.ngRequiredAngular 표현식을 사용합니다.

<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

반응형