ボタンをクリックしたときの確認メッセージを表示

Question

私が達成したいと思うものはかなりシンプルです。必要なフィールドを持つフォームを用意しましょう。たとえば、選択して入力してみてください（とにかく入力と同じ状況です）。

ボタンをクリックしたときにのみ、ng-messagesを表示したいとします。フォームフィールドがボタンをクリックする前にタッチされた場合、正常に動作します。しかし、フォームフィールドが$untouchedの場合、私はそれを行うことができません。

私はこれをプログラムで設定してフォームフィールドに$touchedを設定して解決しましたが、このuggly 'hack'がなければ解決できる方法があるかどうかは疑問です。参照用

// Any way to avoid this line?? 
$scope.myForm.favoriteColor.$setTouched(); 
// 

コード：

HTML：

<md-input-container> 
    <label>Favorite Color</label> 
    <md-select name="favoriteColor" ng-model="favoriteColor" required> 
     <md-option value="red">Red</md-option> 
     <md-option value="blue">Blue</md-option> 
    </md-select> 
    <div class="errors" ng-messages="myForm.favoriteColor.$error" ng-show="validateWithHack"> 
     <div ng-message="required">Required</div> 
    </div> 
</md-input-container> 

JS：

$scope.validateWithHack = function() { 
    if ($scope.myForm.$valid) { 
    alert('Form is valid.'); 
    } else { 
    // Any way to avoid this line?? 
    $scope.myForm.favoriteColor.$setTouched(); 
    // 
    $scope.validateWithHack = true; 
    } 
}; 

は、私は、これは、角度-材料の以前のバージョンで働いていたことをかなり確信しています。今、私は最新の1.1.1を使用しています。

ここでは の問題を容易に再現できるplunkerです。

ありがとうございます。

Answer 1

チェックCodePen

私は自分のフォームにnovalidateを追加し、あなたのmd-button

編集にtype="submit"を追加した2： type="submit"ボタンは、実際にフォームが提出トリガので、角度のフォームが最初に自分自身を検証私たちがしなければならないことは、提出を防ぎ、ただ検証することです。

novalidate（ただ、HTML5の検証をSUPRESSする）フォームへとあなたmd-buttonにtype="submit"を追加しました：これは検証しないようにするには、フォームが<md-button>にng-click="submitMethod(<yourForm>, $event)"を追加提出し、

ような方法を定義し、フォームを検証し、フォームを送信します

$scope.submitMethod(form,ev){ 
    ev.preventDefault(); 
    //rest of your form work say if you want to do ajax or anything you like 
    //check if form valid using form.$invalid 
}