閉じる前にngDialog openConfirm内でフォームを検証

Question

ngDialog.openConfirmを開くボタンがあります。そのダイアログの中には、必要なテキストエリアを含むフォームがあり、最小20文字必要です。ここで

は、私のコードの簡易版である：

someFunction() { 
    let newScope = $scope.$new(); 
    newScope.vm = vm; 
    ngDialog.openConfirm({ 
     scope: newScope, 
     template: 'componentDescription.html' 
    }) 
} 

そして、私のhtml：

<form role="form" name="subForm"> 
    <textarea name="compDesc" 
      required="true" 
      ng-minlength="20" 
      ng-model="vm.compDesc"> 
    </textarea> 
    <button type="button" ng-click="confirm(0)">Submit</button> 
    <button type="button" ng-click="closeThisDialog(0)">Cancel</button> 
</form> 

フォームが有効である場合、ダイアログにのみ提出するために私がしたいと思います。

私はコントローラで機能を作成することでこれを実行しようとしましたが、フォームへのアクセスに問題があり、ダイアログを閉じることができませんでした。

アイデア？

UPDATE： 私はそうのように私のhtmlを変更しました：

<form role="form" name="subForm" novalidate ng-submit="confirm(0)"> 
    <textarea name="compDesc" 
      required="true" 
      ng-minlength="20" 
      ng-model="vm.compDesc"> 
    </textarea> 
    <button type="submit">Submit</button> 
    <button type="button" ng-click="closeThisDialog(0)">Cancel</button> 
</form> 

これは私のエラーメッセージが表示されます最初のクリック、上で動作しますが、2番目をクリックして、それが無効だにもかかわらず、フォームを送信。エラーメッセージが表示されるたびに、送信ボタンが検証を無視すると思われます。

Answer 1

$ scope.confirm（）を呼び出すかどうか手動で決定することができます。

検証をパスして$ scope.confirm（）を呼び出します。

検証をパスしないでください。$ scope.confirm（）をコールしないでください。

テンプレート：

<button type="button" ng-click="ok(0)">Submit</button> 

コントローラ：についての答えをアドレッシング

$scope.ok = function() { 
    if(!validationHasPassed()){ 
     //errorMsg.push('xxx') 
     return false; 
    } 
    $scope.confirm(); 
}; 

Answer 2

単にあなたが入力文字列の長さがあれば送信ボタンを無効にすることができます

<button type="button" ng-disabled="subForm.$invalid" ng-click="confirm(0)">Submit</button> 

Answer 3

フォーム名と少ないし、20

<button type="button" ng-disabled="vm.compDesc.length < 20" ng-click="confirm(0)">Submit</button> 

あなたはまた、以下のエラーメッセージを表示することができng-disabledオプションを追加することができますユーザーが送信ボタンが有効になっていない理由を理解できるようにするためのテキスト領域です。

<form role="form" name="subForm"> 
    <textarea name="compDesc" 
      required="true" 
      ng-minlength="20" 
      ng-model="vm.compDesc"> 
    </textarea> 
    <p ng-show="vm.compDesc.length < 20" style="color:#cc5965">Description should be at least 20 characters</p> 
    <button type="button" ng-click="confirm(0)">Submit</button> 
    <button type="button" ng-click="closeThisDialog(0)">Cancel</button> 
</form>