Angular가 자동으로 'ng-invalid' 클래스를 '필수' 필드에 추가하고 있습니다.

Angular가 자동으로 'ng-invalid' 클래스를 '필수' 필드에 추가하고 있습니다.

폼을 세팅한 각진 앱을 만들고 있습니다.제출 전에 작성해야 할 항목이 있습니다.따라서 '필수'를 추가했습니다.

<input type="text" class="form-control" placeholder="Test" ng-model="data.test" required>

그러나 앱을 실행하면 제출 버튼을 클릭하기 전 또는 사용자가 필드에 입력하기 전에 필드가 "비활성"으로 표시되고 "ng-invalid" 및 "ng-invalid-required" 클래스가 표시됩니다.

사용자가 양식을 제출하거나 해당 필드에 잘못 입력한 경우 두 개의 클래스가 즉시 추가되지 않도록 하려면 어떻게 해야 합니까?

입력이 비어있기 때문에 인스턴스화 시 비활성화되므로 Angular는 다음 값을 올바르게 추가합니다.ng-invalid학급.

시도할 수 있는 CSS 규칙:

input.ng-dirty.ng-invalid {
  color: red
}

기본적으로 페이지가 로드된 이후 필드에 어떤 것이 입력되어 있고, 이 필드에 의해 원래 상태로 리셋되지 않은 경우를 나타냅니다.$scope.formName.setPristine(true)아직 입력되지 않은 것이 무효가 되면 텍스트가 바뀝니다.red.

Angular 형식의 기타 유용한 클래스(향후 참조에 대한 입력 참조)

ng-valid-maxlength- 언제ng-maxlength패스
ng-valid-minlength- 언제ng-minlength패스
ng-valid-pattern- 언제ng-pattern패스
ng-dirty- 폼 로드 후 입력된 것이 있는 경우
ng-pristine- 폼 입력이 로드된 이후 삽입되지 않은 경우(또는 를 통해 재설정됨)setPristine(true)폼으로)
ng-invalid- 검증에 실패했을 때(required,minlength, 커스텀 등)

마찬가지로, 또한ng-invalid-<name>이 모든 패턴과 커스텀으로 생성된 패턴에 대해 설명합니다.

이 게시물 덕분에 이 스타일을 사용하여 필수 필드가 표시될 때 부트스트랩과 함께 자동으로 나타나는 빨간색 테두리를 제거합니다. 그러나 사용자는 아직 아무것도 입력할 기회가 없었습니다.

input.ng-pristine.ng-invalid {
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow:none;
}

필드가 비어 있기 때문에 유효하지 않기 때문에ng-invalid그리고.ng-invalid-required클래스가 올바르게 추가됩니다.

수업을 이용할 수 있습니다.ng-pristine필드를 이미 사용했는지 여부를 확인합니다.

폼이 전송되었거나 필드가 비활성화된 경우 확인을 위해 클래스를 동적으로 추가하십시오.양식 이름을 사용하여 'name' 속성을 입력에 추가합니다.부트스트랩의 예:

<div class="form-group" ng-class="{'has-error': myForm.$submitted && (myForm.username.$invalid && !myForm.username.$pristine)}">
    <label class="col-sm-2 control-label" for="username">Username*</label>
    <div class="col-sm-10 col-md-9">
        <input ng-model="data.username" id="username" name="username" type="text" class="form-control input-md" required>
    </div>
</div>

폼에 ng-timeout=" 속성이 있는 것도 중요합니다.

<form name="myForm" ng-submit="checkSubmit()" novalidate>
 <!-- input fields here -->
 ....

  <button type="submit">Submit</button>
</form>

다음 양식에 검증을 위한 선택적 함수를 추가할 수도 있습니다.

//within your controller (some extras...)

$scope.checkSubmit = function () {

   if ($scope.myForm.$valid) {
        alert('All good...'); //next step!

   }
   else {
        alert('Not all fields valid! Do something...');
    }

 }

이제 앱을 로드할 때 'has-error' 클래스는 양식을 제출하거나 필드를 터치했을 때만 추가됩니다.
!myForm.username.

을 사용하다
myForm.username 입니다.

받아들여진 답은 정확하다.모바일의 경우 이 기능을 사용할 수도 있습니다(ng-module이 아닌 ng-module).

input.ng-invalid.ng-touched{
  border-bottom: 1px solid #e74c3c !important; 
}

언급URL : https://stackoverflow.com/questions/22443487/angular-is-automatically-adding-ng-invalid-class-on-required-fields