zoukankan      html  css  js  c++  java
  • [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched

    Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

      <form name="myForm2" #formRef2="ngForm" (ngSubmit)="onSubmit(formRef2.value)">
        <fieldset ngModelGroup="login">
          <legend>Login:</legend>
    
          Username: <input type="text" name="username" #usernameRef="ngModel" ngModel required>
          Password: <input type="password" name="password" #passwordRef="ngModel" ngModel required>
    
        </fieldset>
      </form>
      <div class="error-messages" *ngIf="!formRef2.valid">
        <span class="error-message" *ngIf="!usernameRef.untouched && usernameRef.errors?.required">Username is required</span>
        <span class="error-message" *ngIf="!passwordRef.untouched && passwordRef.errors?.required">password is required</span>
      </div>
      <pre>
        username pristine: {{usernameRef.pristine}}
        username dirty: {{usernameRef.dirty}}
        username untouched: {{usernameRef.untouched}}
        username touched: {{usernameRef.touched}}
        form value: {{formRef2.value | json}}
        form valid: {{formRef2.valid | json}}
      </pre>

    Github

  • 相关阅读:
    增量学习中的自我训练
    半监督学习和直推学习的区别
    LeetCode: Word Break
    LeetCode: Linked List Cycle
    LeetCode: Reorder List
    LeetCode: Binary Tree Traversal
    LeetCode: LRU Cache
    LeetCode: Insertion Sort List
    LeetCode: Sort List
    LeetCode: Max Points on a Line
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5914166.html
Copyright © 2011-2022 走看看