AngularJS를 사용하여 조건부로 양식 입력을 요구할 수 있습니까?


234

AngularJS를 사용하여 주소록 응용 프로그램 (구성된 예)을 작성한다고 가정하십시오.

우리는 이메일과 전화 번호에 대한 입력을 가진 연락처 양식을 가지고 있으며 중 하나 를 요구 하지만 둘다email필요 phone하지 않습니다 . 입력이 비어 있거나 유효하지 않은 경우에만 입력이 필요 하고 그 반대도 마찬가지입니다.

Angular에는 required지시문이 있지만이 경우 사용법을 문서에서 명확하지 않습니다. 조건부 양식 필드를 어떻게 요구할 수 있습니까? 사용자 지정 지시문을 작성 하시겠습니까?

답변:


463

사용자 지정 지시문을 작성할 필요가 없습니다. 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' />  

보다 완벽한 예는 다음과 같습니다. http://jsfiddle.net/uptnx/1/


5
문제가되지 않습니까? 그에 따라 조건을 업데이트하십시오. 좀 더 필요한 것을 설명하면 나 (또는 ​​다른 사람)가 당신을 보여줄 수 있습니다 :)
Puce

1
참고로 함수를 사용하고 더 복잡한 논리를 수행 할 수도 있습니다.
Leandro Zubrezki

1
이 기능은 지금 문서화되어 있습니다 : docs.angularjs.org/api/ng/directive/ng 필수
bjunix

25

다른 것이 쓰여지면 필요한 입력을 원한다면 :

   <input type='text'
   name='name'
   ng-model='person.name'/>

   <input type='text'
   ng-model='person.lastname'             
   ng-required='person.name' />  

문안 인사.


14

간단하게 각도 검증을 사용할 수 있습니다 :

 <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' /> 

이제 하나의 텍스트 필드에만 값을 채울 수 있습니다. 성이나 이름을 채울 수 있습니다. 이런 식으로 AngularJ에서 조건부 필수 채우기를 사용할 수 있습니다.


여전히 두 필드를 모두 채울 수는 없습니까?
myTerminal

예 사용자가 한 필드를 채우는 경우
에도이

13

Angular2의 경우

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >

편집 : 콘솔 오류 "ExpressionChangedAfterItHasBeenCheckedError : 확인 후식이 변경되었습니다." 라디오 버튼을 확인할 때 이것을 적용하고 있지만 조건부 유효성 검사를 수행하는 것처럼 보입니다.
에릭 소 이케

4
이 질문에 Angular2 + 태그가 없습니다. 본질적으로 다른 프레임 워크 이므로이 답변은 관련이 없습니다.
isherwood

1
@isherwood 당신이 맞아요. 인터넷 검색을 위해 여기에서 종료했기 때문에 추가했습니다. 다운 보트가 있거나 논쟁의 여지가있는 경우 삭제하겠습니다.
laffuste

@Iaffuste Angular2 +에 대한 새로운 질문에 게시하고 답장하여 사람들이 쉽게 조사 할 수 있도록 할 수 있습니다. 어쨌든 +1 =)
arjel
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.