AngularJS材料は、ユーザーがフィールド

Question

をクリックした後にのみ、私は、このマークアップを持っている赤に必要なフィールドをオンユーザーがフィールドをクリックして外に出て、それを埋めることはありません。ユーザーがクリックされていないフィールドが赤に自分のtxtをオンにしないでくださいしかし

。

ユーザーが「送信」無効なボタンをクリックすると、どのように赤くすることができますか？

Answer 1

角度のある材料の世界へようこそ。私が作成したcode pen demoを見てください。フィールドがvalide + submitが押されていない場合は、md-input-container要素のcssクラスmd-input-invalidを手動で設定する必要があります。

<form name="projectForm"> 
    <md-input-container class="md-block" ng-class="{ 'md-input-invalid': projectForm.description.$invalid && wasSend }"> 
     <label>Description</label> 
     <input md-maxlength="30" required md-no-asterisk="" name="description" ng-model="project.description"> 
     <div ng-messages="projectForm.description.$error"> 
      <div ng-message="required">This is required.</div> 
      <div ng-message="md-maxlength">The description must be less than 30 characters long.</div> 
     </div> 
    </md-input-container> 

    <div layout="row"> 
     <md-input-container flex="50" ng-class="{ 'md-input-invalid': projectForm.clientName.$invalid && wasSend }"> 
      <label>Client Name*</label> 
      <input name="clientName" required ng-model="project.clientName"> 
      <div ng-messages="projectForm.clientName.$error"> 
       <div ng-message="required">This is required.</div> 
      </div> 
     </md-input-container> 
    <div> 
     <md-button type="submit" ng-click="wasSend = true">Submit</md-button> 
    </div> 
</form>