2013-05-16 2 views
3

현재 Angularjs로 동적 양식을 만들려고합니다. 테스트 목적을 위해 양식에는 ng-repeat 지시문을 통해 동적으로 추가 된 3 개의 필드가 있습니다. 여기 동적으로 추가하거나 유효성 검사를 제거 할 수 있습니까

는 JSFiddle입니다 : http://jsfiddle.net/charms/4E7zQ/3/

질문 :

나는 현재 동적으로 검증 지침을 설정하려고합니다. 나는 다음과 같은 실현하려 싶습니다

<input ng-model="item.value" name="{{item.name}}" type="{{item.type}}" placeholder="{{item.placeholder}}" {{item.validators}}/> 

{{item.validators}}이 그러나 작동하지 않습니다. 동적 필드 생성 중에 기본 및 사용자 정의 유효성 검사기를 추가하고 제거 할 수있는 방법을 알고있는 사람이 있습니까?

나는 동적으로 추가 양식 필드에 다른 유효성 검사기를 추가하고 필드를 제거하는 경우에는 유효성 검사기를 제거하려는

:

<input ng-model="user.email" name="email" type="email" placeholder="E-Mail" required email-available/> 
<input ng-model="user.firstName" name="firstName" type="email" placeholder="Firstname" required/> 
<input ng-model="user.lastName" name="lastName" type="email" placeholder="Lastname" required"/> 

는 AngularJS와이 가능은?

예를 들어 필드 및 유효성 검사는 사용자가 클릭하는 라디오 버튼에 따라 변경되어야합니다. 필자는 필드를 제거하고이를 동적으로 추가 한 다른 유효성 검사 지시문을 사용하여 다시 추가하려고합니다.

JSFiddle에서 "추가"버튼을 클릭하면 3 개의 필드가 "필수"지시문으로 생성됩니다. 하나의 양식 필드가 제거되면 (제거 버튼을 클릭하여 이루어짐) 유효성 검사도 제거됩니다.

이제 전자 메일과 같이 다른 유효성 검사 지침이나 예를 들어 사용할 수있는 여러 유효성 검사 지시문이있는 다른 필드를 추가하고 싶습니다. 각 필드는 작성된 각 필드마다 다릅니다.

누군가가 해결책이 있다면 좋을 것입니다.

답변

4

사용자 지정 유효성 검사 페이지 http://docs.angularjs.org/guide/forms을 확인하십시오. 모든 유효성 검사는 ngModel 컨트롤러에서 발생합니다. 새니 타이 저와 유효성 검사기를 포함하는 두 개의 배열 - $formatters$parsers이 있습니다. 내가 할 일은 유효성 검사기 목록을 매개 변수로 취하고 위에서 언급 한 목록에 추가하거나 제거하는 지시문을 작성하는 것입니다.

유일한 문제는 기본 제공 검사기를 다시 사용하는 것입니다. 아마도 source에서 유효성 검사기 함수를 뽑아 지시문을 넣었을 수도 있습니다. 아주 예쁘지는 않지만 열심히하지는 않습니다.

또는 유효성 검사기를 직접 작성할 수도 있습니다. 각각은 정규식 일뿐입니다. 팀이 수행 한 작업은 다음과 같습니다.

.value('validators', (function() { 
    function validatorFromRegex(regex) { 
     return function (value) { 
      return (!value) ? true : (value.toString().match(regex) !== null); 
     }; 
    } 
    return { 
     required: function (value) { return (value !== ''); }, 
     path: validatorFromRegex(/^\/?([0-9A-Za-z]+[\-\/]?)*[0-9A-Za-z]+$/), 
     tag: validatorFromRegex(/^([0-9A-Za-z]+\-?)*[0-9A-Za-z]+$/), 
     date: validatorFromRegex(/^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d\d$/), 
     spotify: validatorFromRegex(/^spotify:user:fusetv:playlist:[a-zA-Z0-9]{22}$/), 
     url: validatorFromRegex(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/), 
     twitter: validatorFromRegex(/^[A-Za-z0-9_]{1,15}$/), 
     number: validatorFromRegex(/^\d+$/), 
     phone: validatorFromRegex(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/), 
     zipcode: validatorFromRegex(/^\d{5}(-\d{4})?$/) 
    }; 
})()) 
+0

안녕 이반, 답장을 보내 주셔서 감사합니다. 귀하가 지침의 일부를 게시 한 코드입니다. $ 포맷터와 $ 파서를 살펴볼 것입니다. Angularjs가 어쩌면 상자에서 뭔가를 지원한다고 생각했습니다. 하지만 당신 말이 맞아. 이것은 사실이 아닌 것처럼 보이고 솔루션은 좋아 보인다. –

+0

글쎄, 그것은 일련의 유효성 검사기를 포함하는 정적 객체이지만 지시문에서 사용될 수 있습니다. –

관련 문제