2

angularjs と bootstrap 3 への変更により、必要なパラメーターを入力フィールドに追加するだけで、項目が赤いハイライトで囲まれる必要なフォーム フィールドを作成できませんでした。これは、システムにどのようにセットアップし、動作することを期待するかを示したプランカーです。必要なブートストラップ サイトにもドキュメントが見つからないようです。

プランカー

編集：以下のすべてを以下のコメントのアイデアに置き換えました... CSSを記述してBootstrap 3を使用する必要がないソリューションが欲しいです。

私のフォームフィールドは次のようになります。

<body ng-app>
<div ng-controller="Controller" class="container">
  <form novalidate class="simple-form" name="myForm">
    <div class="form-group col-sm-4">  
      Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
      E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>

      <small class="error" 
          ng-show="myForm.email.$error.required">
          Your name is required.
      </small>

    </div>
  </form>
</div>
</body>

Script.js は次のようになります。

function Controller($scope) {
  $scope.name = "Test";
  $scope.email = "";
}

Style.css は次のようになります。

input.ng-invalid {
  border: 1px solid red;
}

これは機能しますが、ブートストラップ css を上記の css に置き換えます。色相とアニメーションを追加するために css を書き直す必要はなく、必要な要素を単純に追加することをお勧めします。

4

3 に答える 3

1

ここにはいくつかのものが欠けています。まず、フォーム フィールドを検証するには、一意の名前が必要です。

<input class="form-control" type="text" name="test" required/>

novalidate次に、ストック HTML5 検証を無効にするために、フォームに属性を追加する必要があります。

<form class="form-horizontal" name="myForm" role="form" novalidate>

3 番目に、そして最も重要なことは、あなたの例にはアプリやコントローラーが関連付けられていないため、angular はそれを完全に無視しています。それはあなたが自分で直さなければなりません。

アンギュラー フォームの詳細については、http: //docs.angularjs.org/guide/formsを参照してください。

于 2013-10-21T22:25:23.570 に答える
1

この優れたステップバイステップをお勧めします：http://www.ng-newsletter.com/posts/validations.html

于 2013-10-21T22:26:07.887 に答える