http://plnkr.co/edit/9Yq6aZHtKCuZMtPbjBIN?p=preview
私はこれを機能させようと試みましたが、運がありませんでした。angularJS と組み込みの検証機能を使用して送信ボタンを無効にしようとしています。私が見つけたのは、フォームを最初にロードしたときに、送信ボタンがアクティブであり、無効になっていないことです!
テストして試してみたところ、入力が必要であるにもかかわらず、検証コードがチーム名に空の文字列/null 文字列を受け入れることがわかりました。
これを正しくフォーマットする方法を知っている人はいますか？私がそれを機能させる唯一の方法は、空の文字列を単一のスペースに置き換えてデータをごまかすことです...本番環境ではこれは受け入れられません...
index.html は次のとおりです。
<body ng-controller="EnterController as enter">
<div class="panel panel-primary">
<div class="panel-body">
<form name="enterFormNew" ng-submit="enter.TeamNameNext()" autocomplete="off" novalidate>
<div class="row">
<div class="col-xs-8 col-md-6">
<div class="form-group">
<label for="teamname">Team Name</label>
<input name="TeamName" ng-required ng-minlength="2" ng-maxlength="40" ng-model="enter.Team.Name" type="text" id="teamname" class="form-control" />
<p ng-show="enterFormNew.TeamName.$touched && enterFormNew.TeamName.$invalid">This is not a valid team name.</p>
</div>
<div class="form-group">
<label for="division">Division</label>
<select name="selectDivision" ng-required ng-model="enter.Team.Division" id="division" class="form-control" ng-options="division.Name for division in enter.Divisions track by division.Id ">
<option value="">Select...</option>
</select>
<p ng-show="enterFormNew.selectDivision.$touched && enterFormNew.selectDivision.$invalid">A valid Division needs to be selected.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="submit" class="btn btn-primary" ng-disabled="enterFormNew.$invalid">Next</button>
</div>
</div>
</form>
</div>
</div>
</body>
app.js は次のとおりです。
angular.module('Enter', [])
.controller("EnterController", [
function() {
this.RegistrationPhase = 0;
this.Divisions = [{ Id: 1,Name: "Normal"}, {Id: 2,Name: "Not Normal"}];
this.Team = { Name: "", ResumeKey: null, Division: { Id: -1 }, Players: []};
this.TeamNameNext = function() {
//Code removed
alert("Made it to the submit function!")
};
}
]);