0

テーブルに移動されたフォームがあり、ng-submit を使用できないため、組み込みのフォーム検証機能が失われます。

<tr ng-form="controller.add.form">
  <td>New item</td>
  <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
  <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
  <td><button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save()">Save</button></td>
</tr>

これは私のコントローラーがどのように見えるかです:

.controller('ObjectController', ['ObjectService', function(ObjectService)
{
  var objects = this;
  objects.entries = [];
  objects.add = {
    name: '',
    description: '',
    save: function()
    {
      if(!objects.add.form.$valid) return;
      ObjectService.create(
        {name: objects.add.name, description: objects.add.description},
        function(r)
        {
          if(r && 'name' in r)
          {
            objects.add.name = '';
            objects.add.description = '';
            objects.entries.push(r);
          }
        }
      );
    }
  };
  ObjectService.read({}, function(r) { objects.entries = r; });
}])

クリックしたときに標準のポップアップで save メソッドが検証をトリガーするようにするにはどうすればよいですか?

4

2 に答える 2

0

AngularJS API リファレンスから:

ngForm の目的はコントロールをグループ化することですが、<form>タグのすべての機能 (サーバーへの投稿など) を置き換えることではありません。

ngForm では、グループ内のフィールドを個別に検証できるメインの親フォーム内に「フォーム グループ」を作成できます。<form>したがって、グループによる検証が必要ない場合は、ng-form を で囲むか、ng-form をなくす必要があります。

于 2015-12-23T23:06:29.010 に答える
0

クリック ハンドラーにフォームを渡す必要があります。

フォームの名前が「myForm」であると仮定して、ng-click を次のように変更します。

ng-click="controller.add.save($event, myForm)"

そしてあなたのコントローラーで：

    save : function(event, form) {
            if (form.$invalid) {
                console.log('invalid');
            } else {
                console.log('valid');
            }
        }

フォーム要素を使用しないというコメントに気付きました.Yanivが言ったように、テーブルをフォーム要素で囲むだけです:

<form name="myForm" novalidate>
    <table>
        <tr ng-form>
            <td>New item</td>
            <td>
                <input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name">
            </td>
            <td>
                <textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea>
            </td>
            <td>
                <button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save($event, myForm)">Save</button>
            </td>
        </tr>
    </table>
</form>

デモ http://plnkr.co/edit/qKFs3q?p=preview

于 2015-12-23T23:39:50.873 に答える