web-dev-qa-db-ja.com

入力ボックスが空かどうかを確認します

特定の入力コントロールが空かどうかを確認するにはどうすればよいですか？私は、フィールドに$pristineプロパティがあることを知っています。これは、与えられたフィールドが最初は空である場合に、誰かがフィールドを埋めてコンテンツ全体を再度ヤンクした場合はどうなるかを示します。

上記の機能は、フィールドが必須であることをユーザーに伝えるために重要であるため、必要だと思います。

どんなアイデアでも大歓迎です！

angularjsangular-ui
52
vivek

非常にシンプル ：

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>

ng-hide="somefield.length"の代わりにng-show="!somefield.length"を使用することもできます。

より良い代替手段は、実際に Angularのフォーム機能 を活用することです。

<form name="myform">
  <input name="myfield" ng-model="somefield" ng-minlength="5" required>
  <span ng-show="myform.myfield.$error.required">Please enter something!</span>
  <span ng-show="!myform.myfield.$error.required">Good boy!</span>
</form>

ここでPlnkrを更新しました。

86
Supr

文字列の長さを測定する必要はありません。 A！オペレータはあなたのためにすべてを解決できます。常に覚えておいてください：！（空の文字列）= true！（一部の文字列）= false

だからあなたは書くことができます：

<input ng-model="somefield">
<span ng-show="!somefield">Sorry, the field is empty!</span>
<span ng-hide="!somefield">Thanks. Successfully validated!</span>
13
Iman Sedighi

別のアプローチは、以下に示すように、正規表現を使用しています。空の正規表現パターンを使用し、ng-patternを使用して同じことを実現できます

HTML

 <body ng-app="app" ng-controller="formController">
 <form name="myform">
 <input name="myfield" ng-model="somefield" ng-minlength="5" ng-pattern="mypattern" required>
 <span ng-show="myform.myfield.$error.pattern">Please enter!</span>
 <span ng-show="!myform.myfield.$error.pattern">great!</span>
</form>

Controller：@formController：

         var App = angular.module('app', []);
         App.controller('formController', function ($scope) {              
             $scope.mypattern = /^\s*$/g;
         });
5
Shushanth Pallegar

上記の答えはAngular 6では機能しませんでした。以下は、私がそれを解決した方法です。これが入力ボックスの定義方法だとしましょう-

<input type="number" id="myTextBox" name="myTextBox"
 [(ngModel)]="response.myTextBox"
            #myTextBox="ngModel">

フィールドが空かどうかを確認するには、これがスクリプトになります。

<div *ngIf="!myTextBox.value" style="color:red;">
 Your field is empty
</div>

上記の答えとこの答えの微妙な違いに注意してください。入力名myTextBoxの後に.value属性を追加しました。上記の回答がAngularの上記のバージョンで機能したかどうかはわかりませんが、Angular 6ではこれがどのように行われるべきかです。

このチェックが機能する理由についてもう少し説明します。入力ボックスに値が存在しない場合、myTextBox.valueのデフォルト値はundefinedになります。テキストを入力するとすぐに、テキストはmyTextBox.valueの新しい値になります。

チェックが!myTextBox.valueの場合、値が未定義であるかどうかをチェックしています。これはmyTextBox.value == undefinedと同等です。

1
Rito

入力フィールドが空でない場合にチェックボックスを自動チェックするには。

 <md-content>
            <md-checkbox ng-checked="myField.length"> Other </md-checkbox>
            <input  ng-model="myField" placeholder="Please Specify" type="text">
 </md-content>
0
Abdallah Okasha