角度：必要なフィールドがフォームに記入された後、クリックしてボタンを無効にする

-2

ボタンをクリックした後に送信ボタンを無効にして、複数の送信を防ぐ必要があります。角度：必要なフィールドがフォームに記入された後、クリックしてボタンを無効にする

私は

<body ng-app="ngToggle"> 
<div ng-controller="AppCtrl"> 
<form name="newUserForm"> 
<input type="text" required> 
<input type="text" required> 
<input type="text"> 
<button ng-click="disableClick()" ng-disabled="isDisabled" 
ng-model="isDisabled">Disable ng-click</button> 
</form> 
</div> 
</body> 

angular.module('ngToggle', []) 
.controller('AppCtrl',['$scope', function($scope){ 
$scope.isDisabled = false; 
$scope.disableClick = function() { 
    alert("Clicked!"); 
    $scope.isDisabled = true; 
    return false; 
} 
}]);

を試してみましたが、これは唯一のいずれかの検証

出典

2017-01-20 Azhar

コードには必須フィールドはありません。フォームはありません。コードの量を最小限に抑えようとしているのは良いことですが、もう少し必要になります。 –

検証するものがない場合は、何も検証できません –

ボタンのng-modelは何を期待していますか？ –

[OK]をせずにボタンを無効にします、私はあなたがので、私は助け、いくつかのコードを思い付くしようとするでしょうしたい/何を意味するかを取得します - これは明らかに不足しているが、それは必要なコードが欠落していなかった場合、あなたは解決策を持っていると思います:)

まず、あなたが適切にあなたのフォームを記述する必要があります：

<form name="newUserForm" ng-submit="disableClick(newUserForm.$valid)" novalidate> 
    <input type="text" name="input1" ng-model="form.input1" required> 
    <input type="text" name="input2" ng-model="form.input2" required> 
    <input type="text" name="input3" ng-model="form.input3"> //not required 
    <button type="submit" ng-disabled="isDisabled">Disable ng-click</button> 
</form>

あなたが欠けているので、私たちがここに持っている、：

あなたは、フォームに名前を付けましたが、あなたは=タイプでNG-提出したり、ボタンとしての形で、提出欠けています"submit"フォームが送信され、検証が行われるとき
Angularが入力を検証するにはng-modelが必要です。そうでなければ検証されません（HTML5の検証は行いますが、読み込みになります）
私はnovalidateを追加しましたので、ブラウザに「ねえ、これは検証されましたが、あなたのものではないので何もしません」と言います。角度は引き継ぎます
最後に、Angularはフォームに2つのプロパティを追加します（詳細はAngular form Docsを参照）。$ validはそのうちの1つで、有効な入力がすべて有効な場合にtrueに設定されます。

これは、フォームに加えた変更を要約したものです。

Javascriptの一部のために、ただ一つの小さな変化があったとして：

$scope.disableClick = function(valid) { 
    if(valid && !$scope.isDisabled) { 
    $scope.isDisabled = true; 
    } 
    return false; 
}

は、私は変更が明らかであると思いますが、私はとにかく説明します - チェックnewUserForm $有効（ブール値）ということと、それはだ場合。 true（フォームが検証に合格したことを意味します）このボタンを無効にします。

もちろん、ボタンを無効にするだけでなく（Dev Toolsで簡単に再び有効にすることもできます）、コードを実行しないようにチェックを追加する必要があります。 scope.isDisabledをifステートメントに設定します。

ご希望の質問にお答えします：

P.S.実行中のデモがありますPlunker

出典

2017-01-20 22:55:26

これは動作します!!ありがとうございます – Azhar

大歓迎です。あなたはそれを受け入れられたものとしてマークする必要があります;） –

角度：必要なフィールドがフォームに記入された後、クリックしてボタンを無効にする

答えて

関連する問題