필수 필드의 ngMessage를 더티 또는 폼 전송 시에만 표시하려면 어떻게 해야 합니까?

필수 필드의 ngMessage를 더티 또는 폼 전송 시에만 표시하려면 어떻게 해야 합니까?

AngularJS 1.3.0 RC0 및 angular-messages를 사용하고 있습니다.ng-messages는 폼이 처음 로드되어 원래대로일 때 이러한 "필수" 필드에 대한 오류 메시지를 표시합니다.따라서 새로 로드된 양식 페이지는 오류 메시지로 채워집니다.이건 제가 원하는 게 아닌데요.필수 필드의 ngMessage를 표시하는 방법은 필드가 더럽거나 폼을 전송하는 경우뿐입니까?

공식 문서를 읽어봤는데, 전혀 모르겠어요.그리고 "ng-show = "fieldName"을 입력하려고 했습니다.ng-div의 $120"이 작동하지 않았습니다.어떤 도움이라도 주시면 대단히 감사하겠습니다!

하다를 사용하세요.ng-if하는 $dirty「」가 붙어 ng-messages.

예:

<div ng-messages='myForm.myControl.$error' ng-if='myForm.myControl.$dirty'>
    <div ng-message='required'>Required field</div>
</div>

이를 위한 가장 좋은 방법은 $touched입니다.

<div class="help-block" ng-messages="userForm.name.$error" ng-show="userForm.name.$touched">
    ...
</div>

더러워진 경우에만:

<div ng-messages="myForm.myField.$dirty && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

양식을 제출한 경우에만:

<div ng-messages="myForm.$submitted && myForm.myField.$error">
    <div ng-message='required'>Required field</div>
</div>

NG-If you commended to that...

<div ng-messages='myForm.myControl.$error' ng-if='submitted'>
   <div ng-message='required'>Required field</div>
</div>

그리고 제출 버튼에 다음을 추가합니다.

ng-click="submitted=true"

$scope를 변경하는 것이 좋습니다.submitted'를 다시 입력하면 false로 돌아가기 때문에 텍스트/이메일 입력에 다음 내용을 추가할 수 있습니다.

ng-keyup="submitted=false"

이렇게 하면 '$scope'를 변경할 수 있는 것은 Submit 버튼뿐입니다.'submitted' to true'는 true로 설정되며, 그 외의 모든 작업은 false로 설정되므로 [Submit]버튼을 클릭할 때까지 오류 메시지를 숨깁니다.

에러가 발생하거나 사용자가 페이지를 전송하려고 할 때까지 메시지를 표시하고 싶지 않았습니다.또, 상기의 어느 솔루션도 동작하지 않았습니다.

결국, 나는 다음과 같이 성공했습니다.

<form name='frmUser'>
..........
..........
<div ng-messages="frmUser.firstName.$error" 
     ng-show='frmUser.$submitted || frmUser.firstName.$dirty' role="alert">
      <div ng-message="required" class="err">Required</div>
      <div ng-message="maxlength" class="err">Maximum 50 characters.</div>
</div>
<input ng-model="model.first"
       name="firstName"
       type="text"
       ng-required="true"
       ng-maxlength="50"
       placeholder="Enter your first name" />

</form>

올바르지 않은 항목을 입력하면 오류를 표시합니다.

페이지를 송신하려고 하고, 필요한 필드를 지정하지 않으면, 에러가 표시됩니다.

조건을 만족한 후에도 오류 메시지가 계속 표시됩니까?, 은, 은, 에 의존해야 한다는 을 기억하십니까?ngMessages§:

angular.module("exampleModule", ["ngMessages"]);

이 답변은 도움이 되었지만 오류 메시지가 계속 남아 있는 문제를 해결하지는 못했습니다.나는 다음과 같이 쇼와 히데의 조금 더 복잡한 용도를 생각해냈다.

<div class="help-block"
    ng-messages="addPlanForm.planName.$error"
    ng-show="addPlanForm.$submitted || addPlanForm.planName.$dirty || (addPlanForm.planName.$invalid && addPlanForm.planName.$touched)">
    <p ng-message="required" ng-hide="addPlanForm.planName.$valid">Your name is required.</p>
</div>

오류 발생 시 생성되는 메시지에 ng-hide를 추가하면 오류 수정 시 메시지가 사라집니다.멋있다.각진 게 좋아요.

이것만 시험해 보세요

<div ng-messages='myForm.fieldName.$error && (myForm.fieldName.$dirty || myForm.$submitted)' >
    <div ng-message='required'>Required field</div>
</div>

이 문제로 고민하고 있었는데 디폴트 브라우저 동작으로 인해 ng-required="true"로 잘못된 폼을 전송할 수 없었기 때문에 NG-interval이 나타나지 않았습니다.이 문제를 해결하려면 no validate로 양식을 꾸밀 수 있습니다.다음으로 완전한 작업 예를 제시하겠습니다.

<form name="myForm" novalidate ng-submit="myForm.$valid && controllSideSubmitHandle()">
  <input type="text" name="name" ng-model="myScope.name" ng-required="true">
  <div ng-messages="myForm.$error || myForm.$submitted" style="color:maroon" role="alert" ng-if="myForm.name.$dirty || myForm.$submitted">
    <div ng-message="required">Name is required.</div>
  </div>
  <input type="submit" value="Submit"/>
</form>

나는 이 문제를 css 규칙으로 해결했다.

[ng-messages] { display: none; color:red; } 
.ng-dirty [ng-messages] { display:block }

바로 그거야.

나한테는 아주 매력적이죠.

여기 플런커가 있습니다.

Angular의 수업 활용은 놀랍습니다. 이것으로 많은 것을 할 수 있습니다!

<input required type="text" ng-model="model" name="field" ng-maxlength="13" ng-minlength="10">     
<div ng-messages="form.field.$error" ng-if='form.$submitted'>
            <p ng-message="required">Required</p>
            <p ng-message="maxlength">not a valid field. Length exceeds.</p>
            <p ng-message="minlength">not a valid field. Length is shorter.</p>
</div>

버튼 타입은 다음과 같습니다.submit그리고 이건 먹힐거야

Angular를 사용하는 경우JS Material은 많은 기능을 바로 사용할 수 있습니다!그냥 모든 것을 안에 넣는 걸 잊지 마세요.<md-input-container>.

여기 코드펜의 예가 있습니다.이것이 어떻게 보이는지 알 수 있습니다.이것은 입력이 클릭되기 전에 오류를 숨길 뿐만 아니라 멋진 빨간색 스타일링과 언제 표시되는지 보여주는 애니메이션을 추가합니다.

실제 코드는 다음과 같습니다.

  <form name="books" novalidate>
    <md-input-container>
      <input ng-model="title" name="title" required/>
      <div ng-messages="books.title.$error">
        <div ng-message="required">Title is required</div>
      </div>
    </md-input-container>
  </form>

언급URL : https://stackoverflow.com/questions/25634394/how-to-make-ngmessage-for-required-fields-only-show-when-dirty-or-submitting-a-f