[forms] AngularJS에서 양식이 유효하지 않은 경우 제출 버튼 비활성화

Program / 글쓴이

나는 이런 식으로 내 양식을 가지고 있습니다 :

<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>

답변

이 답변에 추가하십시오. 양식 이름 (Angular 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>

스 니펫 확장

좀 더 엄격하고 싶다면

답변