web-dev-qa-db-ja.com

フォーム送信時にプログラムですべてのフォームフィールドをng-touchedに設定する

HTML：

<div class="form-group" 
     ng-class="{ 'has-error' : form.firstName.$invalid && form.firstName.$touched }">
  <label for="firstName" 
         class="control-label">
         First Name
  </label>
  <input type="text" 
         name="firstName" 
         id="firstName" 
         ng-model="editableUser.firstName" 
         class="form-control" 
         required>
  <span class="help-block" 
        ng-show="form.firstName.$error.required && form.firstName.$touched">
        First Name is required
  </span>
</div>

<input type="submit" 
       ng-click="submit()" 
       value="Submit" 
       class="btn btn-default">

ユーザーが送信をクリックしたときに無効なフィールドを見つけるために、「has-error」クラスを取得しようとしています。

次のようなことができると思います。

$scope.submit = function () {
  if ($scope.form.$invalid) {
    angular.forEach($scope.form.$invalid, function(field) {
      field.$setTouched();
    });
    alert("Form is invalid.");
  }
};

しかし、 https://docs.angularjs.org/api/ng/type/form.FormController には$setTouchedメソッドがありません

EDIT：Realize $setTouchedは存在し、それは https://docs.angularjs.org/api/ng/typeにあります/ngModel.NgModelController

javascriptangularjstwitter-bootstrapvalidation
31
Derek
if ($scope.form.$invalid) {
    angular.forEach($scope.form.$error, function (field) {
        angular.forEach(field, function(errorField){
            errorField.$setTouched();
        })
    });
    alert("Form is invalid.");
}

プランカー： http://plnkr.co/edit/XmvoTkIQ0yvFukrVSz11

50
Alex Paramonov

最近追加された$ submittedをお試しください

<input type="text" 
     name="firstName" 
     id="firstName" 
     ng-model="editableUser.firstName" 
     class="form-control" 
     required>
   <span class="help-block" 
    ng-show="form.firstName.$error.required && (form.firstName.$touched || form.$submitted">
    First Name is required
16
henkieee

Alexeyの答えを拡張して、同じことを行う新しいメソッドをFormControllerに追加できるので、1つの送信関数から別の送信関数にコードをコピーする必要はありません。

// config.js
export default function config($provide) {
    $provide.decorator('formDirective', $delegate => {
        const fn = $delegate[0].controller.prototype
        if (!('$setTouched' in fn)) fn.$setTouched = function() {
            if (this.$invalid) {
                Object.values(this.$error).forEach(controls => {
                    controls.forEach(control => control.$setTouched())
                })
            }
        }
        return $delegate
    })
}

// controller.js
$scope.submit = function () {
    if ($scope.form.$invalid) {
        $scope.form.$setTouched();
        alert("Form is invalid.");
    }
};

なぜ誰かがこの種の検証を行いたいのか疑問に思う場合：iOS制約検証が不足しているので、ng-submitは、無効なフォームでも呼び出されます。

7
Klaster_1

上記の答えは私にはうまくいきませんでした.. Touchedをプログラムでtrueに設定しました。

たとえば、この$scope.frmUser["U_Name"].$setTouched();$scope.frmUser["U_Name"].$invalidを実行した後も常にtrueのままでした。

$scope.frmUser.$invalidがfalseの場合にのみ送信ボタンが有効になります

代わりに、javascriptからプログラムで設定される各フィールドのスコープ変数を取得し、true/falseを設定するとうまくいきました。

1
Hemant

ES6 + lodash fpを使用したい場合

import forEach from 'lodash/fp/forEach'

    validate()
    {
        forEach(forEach(field => field.$setTouched()))(this.form.$error)
    }

<form name="$ctrl.form">...</form>
0
rtn