양식이 Angular로 비활성화되면 제출 버튼 사용 안 함JS

양식이 Angular로 비활성화되면 제출 버튼 사용 안 함JS

제 폼은 다음과 같습니다.

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

보시다시피 입력이 비어 있으면 버튼이 비활성화되지만 텍스트가 포함되어 있으면 다시 활성화로 변경되지 않습니다.어떻게 하면 될까요?

ng-disabled와 함께 폼의 이름을 사용해야 합니다.여기 Plunker에 대한 데모가 있습니다.

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

이 대답에 덧붙이다.폼네임(각선 1.3)에 하이픈을 사용해도 고장난다는 것을 방금 알았습니다.

이 조작은 동작하지 않습니다.

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

선택된 응답은 올바르지만 나와 같은 사용자가 서버 측으로 요청을 보내는 비동기 검증에 문제가 있을 수 있습니다. 지정된 요청 처리 중에 버튼이 비활성화되지 않으므로 버튼이 깜박여 사용자에게 매우 이상하게 보입니다.

이를 무효화하려면 $pending 상태의 폼만 처리하면 됩니다.

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

반응형 양식을 사용하는 경우 다음을 사용할 수 있습니다.

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

간단한 지시문을 생성하여 모든 필수 필드가 채워질 때까지 버튼을 비활성화할 수 있습니다.

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

상세한 것에 대하여는, 여기를 클릭해 주세요.

<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

좀 더 엄격해지고 싶다면

언급URL : https://stackoverflow.com/questions/15300067/disable-submit-button-when-form-invalid-with-angularjs