13 адказы

Тое, што працавала для мяне было выкарыстоўваць $ setSubmitted функцыя, якая паказвае першыя ў кутніх дакументы ў версіі 1.3.20.

У выпадку пстрычкі, дзе я хацеў, каб запусціць праверку, я зрабіў наступнае:

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

Гэта было ўсё, што спатрэбілася для мяне. Паводле дакументацыі гэта «Усталёўвае форму ў яе прадстаўленым дзяржава.» Ён згадваецца .

41
дададзена
яна не працуе форма ... Я павінен быў перабрацца ўсе ўваходы і выклік $ SetDirty() на іх.
дададзена аўтар JobaDiniz, крыніца
гэта не працуе, калі вы выкарыстоўваеце НГ-паведамленні і толькі паказваць іх, калі <�я> $ памылка </я> && <�я> $ забруджаны .
дададзена аўтар JobaDiniz, крыніца
@JobaDiniz Вы спрабавалі функцыю SetDirty $? Ён таксама згадваецца ў сувязі з маім адказам: кода. angularjs.org/1.3.20/docs/api/ng/type/form.FormControll‌ эр Надзея, што дапамагае!
дададзена аўтар developering, крыніца

Я ведаю, гэта крыху занадта позна, каб адказаць, але ўсё, што вам трэба зрабіць, гэта, прымусіць ўсе формы забруджаныя. Зірніце на наступны фрагмент кода:

angular.forEach($scope.myForm.$error.required, function(field) {
    field.$setDirty();
});

і пасля гэтага вы можаце праверыць, калі ваша форма сапраўдная з дапамогай:

if($scope.myForm.$valid) {
    //Do something
}   

і, нарэшце, я думаю, вы хацелі б змяніць свой маршрут, калі ўсё выглядае добра:

$location.path('/somePath');

Edit: form won't register itself on the scope until submit event is trigger. Just use ng-submit directive to call a function, and wrap the above in that function, and it should work.

39
дададзена
я хачу, каб атрымаць доступ да $ scope.form ад кантролера дырэктывы, які ўкладзены ўнутры <form> -. $ сфера $ parent.form не вызначаны.
дададзена аўтар chovy, крыніца
Я спрабую запусціць праверку формы з па-за формы ў НГ падаць апрацоўшчыкам. Вы можаце атрымаць толькі аб'ект формы ўнутры там.
дададзена аўтар chovy, крыніца
я звычай »мець выгляд аб'ект, які будзе пасланы да яго
дададзена аўтар chovy, крыніца
У мяне ёсць дырэктыва, ўкаранёная ў форме, якая абнаўляе поле формы па-за дырэктывы .... валідатар не ўжываецца, калі я не нажмйте і размыццё палі формы я хачу пацверджана.
дададзена аўтар chovy, крыніца
Вы можаце даць прыклад праграмна запуску НГ-Submit дырэктывы?
дададзена аўтар chovy, крыніца
@chovy Не мог бы вы даць мне некаторую інфармацыю аб наладах вашага вуглавога прыкладання? Кантролер ваша форма знаходзіцца ў, гэта кантролер дзіцяці або незалежны кантролер?
дададзена аўтар Thilak Rao, крыніца
@chovy я не правільна разумею. Але дазвольце мне паспрабаваць дапамагчы вам. Вы спрабавалі праверкі на бразгату?
дададзена аўтар Thilak Rao, крыніца
@chovy НГ-адправіць проста звязвае функцыю з падзеяй ўявіць, чаму б проста не назваць гэтую функцыю?
дададзена аўтар Thilak Rao, крыніца

У выпадку, калі хто-то вяртаецца да гэтага пазней ... Нічога з вышэйпералічаных працавалі для мяне. Так што я выкапаў ўніз ў кішкі кутні праверкі формы і знайшоў функцыю яны называюць выканаць валідатар на зададзенае полі. Гэта ўласцівасць зручна называецца $ Validate .

Калі ў вас ёсць найменны выгляд Myform , можна праграмна выклікаць myForm.my_field. $ Validate() , каб выканаць праверку поля. Напрыклад:

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

Звярніце ўвагу, што выклік $ Validate мае значэнне для вашай мадэлі. З кутніх Дакументаў ngModelCtrl $ Validate .:

<�Р> Запускае кожны з зарэгістраваных валідатары (першага сінхронных валідатары, а затым асінхронных валідатары). Калі змены валіднасці несапраўднымі, мадэль будзе ўсталяваная на нявызначаны, калі ngModelOptions.allowInvalid не дакладна. Калі рэчаіснасць мяняецца на сілу, яна будзе ўстаноўлена мадэль да апошняй даступнай сапраўднага $ modelValue, гэта значыць альбо ў апошнім аналізаваным значэння або апошняга значэння, устаноўленага з вобласці.

Так што калі вы плануеце рабіць нешта з няслушным значэннем мадэлі (напрыклад, выскоквае паведамленне пра іх так), то вам неабходна пераканацца, што allowInvalid усталяваны на True для ваша мадэль.

14
дададзена

Вы можаце выкарыстоўваць <�моцны> Вуглавая-валідатар , каб рабіць тое, што вы хочаце. Гэта глупства проста выкарыстоўваць.

<�Моцны> Гэта будзе:

  • Only validate the fields on $dirty or on submit
  • Prevent the form from being submitted if it is invalid
  • Show custom error message after the field is $dirty or the form is submitted

<�Моцны> Глядзіце дэма

<�Моцны> Прыклад </моцны>

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

Калі поле не праходзіць валідатар , то карыстальнік не зможа адправіць форму.

Праверце кутні валідатары выпадкаў выкарыстання і прыклады для атрымання дадатковай інфармацыі.

Адмова ад адказнасці: я з'яўляюся аўтарам Angular-валідатар

12
дададзена

Ну, кутняй шлях быў бы дазволіць яму апрацоўваць праверкі, - так як гэта робіць пры кожным змене мадэлі - і толькі паказаць вынік карыстачу, калі вы хочаце.

In this case you decide when to show the errors, you just have to set a flag: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

Наколькі я ведаю, ёсць пытанне падаў у вуглаваты давайце больш прасунуты кантроль формы. Бо яна не вырашаная, я б выкарыстоўваць гэта замест таго, каб вынаходзіць усё існуючыя метады праверкі.

рэдагаваць: Але калі вы настойваеце на сваім шляху, вось ваша мадыфікаваная скрыпка з праверкай, перш чым адправіць. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview Кантролер вяшчанне падзеі, калі кнопка націснутая, і дырэктыва робіць чараўніцтва праверкі.

11
дададзена
Калі вы перадаеце падзея, якое вы можаце перадаць параметры. $ $ Аб'ём вяшчання ( '' startValidations, param1, param2). Слухаць застаецца нязменнай: аб'ём $ на ( 'startValidations', validateMe) ;. І зваротнага выкліку Fn: функцыя validateMe (падзея, param1, param2) {} Глядзіце дакументацыю: docs.angularjs.org/api/ng.$rootScope.Scope#$broadcast
дададзена аўтар Oliver, крыніца
Перадаваныя падзея выкліча $ на зваротным выклік у кожнай дырэктыве, так як усе яны знаходзяцца пад сферай кантролера.
дададзена аўтар Oliver, крыніца
дзякуй! Калі б ужо думалі, абыходны шлях з устаноўкай нешта ў кантролеры ў глабальным маштабе пасля таго, як прадставіць, але гэта лепш,
дададзена аўтар Maarten, крыніца
Гэта працуе ў дадзеным прыкладзе, але што, калі я, як у мяне ёсць у маім выпадку (але не ў гэтым plunkr..sorry!), Больш адна дырэктыва, як гэты адрас электроннай пошты аднаго. Ці буду я нейкі чынам павінен перамясціць праверку з дырэктываў ў асобны клас валідацыю, а затым выклікаць ўсе метады праверкі гэтай формы, ці я магу неяк ініцыяваць праверку іншым спосабу для ўсіх дырэктыў. Як праверка ініцыюецца размытасці, можа нават выклікаць размытасці з кода, але гэта здаецца жахлівым.
дададзена аўтар Maarten, крыніца
О, і я ведаю пра гэтую праблему. На жаль, гэта не ў бэта-версіі, нават яшчэ і працоўны працэс, я кажу пра тое, з'яўляецца абавязковым адзін для гэтай кампаніі
дададзена аўтар Maarten, крыніца
ahh..didn't сапраўды разумеюць, што частка. Дзякуй!
дададзена аўтар Maarten, крыніца
Я выкарыстоўваю трансляцыі зараз, але таму, што я хацеў бы правесці адрозненне паміж трансляваных трыгерам праверкі і размытай, якую я хацеў перадаць параметр, як гэта :. Аб'ём $ на ( «startValidations», validateMe ( «падзея», «вяшчанне» ));. Гэта, аднак, спрацоўвае OnLoad, верагодна, з-за() за функцыі. Ці магу я нейкім чынам вырашыць гэтую праблему па-іншаму?
дададзена аўтар Maarten, крыніца

Адзін з падыходаў заключаецца ў сіле ўсе атрыбуты, каб быць брудным. Вы можаце зрабіць гэта ў кожным кантролеры, але ён вельмі брудны. Было б лепш, каб мець агульнае рашэнне.

Самы просты спосаб, якім я мог думаць аб тым, каб выкарыстоўваць дырэктыву

  • ён будзе апрацоўваць адпраўкі формы атрыбут
  • ён перабірае ўсе палі формы і пазначае некранутыя поля забруджаныя
  • ён правярае, ці з'яўляецца форма сапраўдная перад выклікам функцыі прадставіць

вось дырэктыва

myModule.directive('submit', function() {
  return {
    restrict: 'A',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind('submit', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === 'string' && !name.match('^[\$]')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

І абнавіць форму HTML, напрыклад:

 <form ng-submit='justDoIt()'>

будзе выглядаць так:

 <form name='myForm' novalidate submit='justDoIt()'>

See a full example here: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview

9
дададзена

Вось мая глабальная функцыя для адлюстравання паведамленняў пра памылкі формы.

 function show_validation_erros(form_error_object) {
        angular.forEach(form_error_object, function (objArrayFields, errorName) {
            angular.forEach(objArrayFields, function (objArrayField, key) {
                objArrayField.$setDirty();
            });
        });
    };

І ў маіх любых кантролерах,

if ($scope.form_add_sale.$invalid) { 
    $scope.global.show_validation_erros($scope.form_add_sale.$error);
}
2
дададзена
Я змяніў мой адказ. Калі ласка, праверце яго зараз
дададзена аўтар Namal, крыніца
Гэта не дае адказу на пытанне.
дададзена аўтар Dementic, крыніца

На падставе адказу Thilak, я быў у стане прыдумаць з гэтым рашэннем ...

Так як мае палі формы паказваць толькі паведамленні праверкі, калі поле з'яўляецца несапраўдным, і чапалі карыстальнік я быў у стане выкарыстаць гэты код, які запускаецца кнопкай, каб паказаць мае недапушчальныя поля:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
  angular.forEach(error, function(field) {
    field.$setTouched();
  });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
  isValid = false;
}
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

  <!-- field label -->
  
  <!-- end field label -->
  <!-- field input -->
  
  <!-- end field input -->
  <!-- field help -->
  
    this field is required
    
  <!-- end field help -->
</div>
<!-- end form field -->
</div> </div>
2
дададзена

Заўвага: Я ведаю, што гэта хак, але гэта было карысна для кутніх 1.2 і раней, што не забяспечвае просты механізм.

Праверка нагамі ў на змена падзея, таму некаторыя рэчы, як змяненне значэнняў праграмна не будзе выклікаць яго. Але запуск падзеі змены будуць выклікаць праверку. Напрыклад, з дапамогай JQuery:

$('#formField1, #formField2').trigger('change');
1
дададзена
Не Вуглавая спосаб .
дададзена аўтар Dementic, крыніца
Гэты падыход просты. Акрамя таго, ён мае тое перавага, што ён працуе на старых (усе) версіі Кутняе.
дададзена аўтар Paul LeBeau, крыніца

Для таго, каб праверыць усе палі формы маёй, калі я хачу, я раблю праверку на кожным полі $$ кіравання, як гэта:

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});
1
дададзена

Я зрабіў што-то наступнае, каб зрабіць яго працу.

<form name="form" name="plantRegistrationForm">
  <div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
    <div class="col-md-3">
      <div class="label-color">HEADER NAME 
        *</div>
    </div>
    <div class="col-md-9">
      <input type="text" name="headerName" id="headerName" 
             ng-model="header.headerName" 
             maxlength="100" 
             class="form-control" required>
      <div ng-show="form.$submitted || form.headerName.$touched">
        Header Name is required
      </div>
    </div>
  </div>

  <button ng-click="addHeader(form, header)" 
          type="button" 
          class="btn btn-default pull-right">Add Header
  </button>

</form>

У кантролеры вы можаце зрабіць;

addHeader(form, header){
        let self = this;
        form.$submitted = true;
        ... 
    }

Вам трэба трохі CSS, а таксама;

.label-color {
            color: $gray-color;
        }
.has-error {
       .label-color {
            color: rgb(221, 25, 29);
        }
        .select2-choice.ui-select-match.select2-default {
            border-color: #e84e40;
        }
    }
.validation-message {
       font-size: 0.875em;
    }
    .max-width {
        width: 100%;
        min-width: 100%;
    }
0
дададзена

Мне падабаецца гэты падыход ў апрацоўцы праверкі па націску кнопкі.

  1. Там няма неабходнасці спасылацца на што-небудзь ад кантролера,

  2. гэта ўсё апрацоўваецца з дырэктывай.

on github

0
дададзена

Вы можаце паспрабаваць гэта:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

// The controller

$scope.submitForm = function(form){
                //Force the field validation
                angular.forEach(form, function(obj){
                        if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
                        { 
                                obj.$setDirty();
                        }
                })
        
        if (form.$valid){
                
                        $scope.myResource.$save(function(data){
                        //....
                        });
                }
}
<!-- FORM -->

  <form name="myForm"  role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
      
         
        
        
        <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
  </div>
    
<!-- FORM GROUP to field 2 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
     
      <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
      class="form-control input-sm" required>
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
  </div>

  </form>

<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>
</div> </div>
0
дададзена