테이블 안의 AngularJS 형식의 유효성 검사

Question

내 질문에 이상하게 보일 수 있지만 사용자가 입력을 사용하여 테이블에 정보를 직접 입력 할 수있는 각도 SPA를 만들었습니다. 데이터를 어디서나 제출할 필요가 없으며 마지막에 표시 할 값을 계산하는 데 서비스에서 사용됩니다. 내 문제는 지금 비록 내가 비어 있지 않은지 확인하려면 입력 유효성을 검사하고 싶습니다.

필자가 조사한 모든 자습서는 양식의 일부인 입력에 의존합니다. 표의 레이아웃이 좋게 보이고 목적에 맞지 않으므로 피하려고합니다.

 <table class="text-center"> 
       <tr> 
        <th class="header">Course Type</th> 
        <th>Amount of Times</th> 
        <th>Frequency (PA)</th> 
        <th>% Staff who need it</th> 
       </tr> 
       <tr> 
        <td class="header"><label for="induction">Induction:</label></td> 
        <td><input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /></td> 
        <td><input class="form-control" type="number" id="inductionFrequency" ng-model="staff.inductionFrequency" /></td> 
        <td><p>100</p></td>    
       </tr> 
       <tr> 
        <td class="header"><label for="newsLetter">News letter:</label></td> 
        <td><input class="form-control" type="number" id="newsLetterAmount" ng-model="staff.newsLetterAmount" /></td> 
        <td><input class="form-control" type="number" id="newsLetterFrequency" ng-model="staff.newsLetterFrequency" /></td> 
        <td><input class="form-control" type="number" id="newsLetterPercent" ng-model="staff.newsLetterPercent" /></td> 
       </tr> 
     </table> 

    <div class="row margin-top"> 
     <div class="col-sm-4 col-sm-offset-4"> 
      <button class="button-orange" style="font-size: 16px; font-weight: 700;" ng-click="clicked()">Next Step</button> 
     </div> 
    </div> 

정보는 사용자가있는 경우 계속 허용하지 각도 1.2을 사용하여 몇 가지 기본적인 유효성 검사를 추가하는 것이 좋습니다 방식 일 것입니다 무슨 나중에 사용자에 대한 몇 가지 계산을 실행하는 데 사용되는 객체에 저장됩니다 값이 비어 있습니까? 죄송합니다. 내 첫 번째 각도 앱입니다. 예전에 blur 등을 사용하여 JavaScript 유효성 검사를했는데 Angular를 사용하면 훨씬 간단 해 보입니다. 당신이 양식을 사용하는 경우

Answer 1

AngularJS에서 양식 지시문은 찾은 양식 요소에 자동으로 바인딩됩니다. 양식 요소를 사용할 필요가 없습니다. ng-form을 사용하면됩니다.

<table ng-form="exampleForm"> 
    ... 
</table> 

이것은 요소에 FormController에을 생성하고 로컬 영역에 "형태"를 추가하고있다 (예컨대 $scope.exampleForm)에 액세스 할 것이다.

나는 plunker here 예제를 작성하고 몇 가지 작업을 수행했습니다.

1. 표에 ng-form 지시문을 추가했습니다.
2. 난 I 버튼에 ng-disabled 지시문을 추가하고 폼의 $invalid 속성에 바인딩 된 상기 제 1 입력 요소
3. required에 추가.

첫 번째 입력에 값이 있으면 버튼이 활성화됩니다.

매우은 1.2.x에서 업그레이드 할 것을 제안합니다. 보안, 안정성 및 성능에 대한 많은 업데이트가 누락 될 가능성이 있습니다.

Answer 2

은 다음 양식는 FormName에 의한 검증의 기본을 처리합니다. $ isvalid, FROMNAME. 당신이 form 태그를 사용하지 않을 경우

, 다음 등이 필요 더러운 $, 수동 조건으로 ng-show을 사용하여 양방향 바인딩으로 오류 메시지를 표시하거나 숨 깁니다.

---

<input class="form-control" type="number" id="inductionAmount" ng-model="staff.inductionAmount" /> 

<span style="color:red" ng-show="staff.inductionAmount === undefined || staff.inductionAmount === ''"> idection name is required</span> 

처럼 또 다른 방법은 당신이 여기 on-focus와 자바 스크립트 ng-fucus과 ng-show/ng-hide 방법을 사용하여 할 수있는 동일한 방식으로했던 것과 동일합니다.