角度2送信時にフォームを検証する

Question

こんにちは formbuilderまたはformGroupを使わずにクリックした送信ボタンで角度フォームを検証する方法、または送信ボタンを無効にする方法を教えてください。

<form #form="ngForm" novalidate> 
        <header> 
         <i class="fa fa-users"></i> Register 
        </header> 
        <fieldset class="nomargin">  
         <div class="form-group"> 
          <div class="row">           
           <div class="col-sm-12" [class.has-error]="username.touched && username.invalid">                           
            <input [(ngModel)]='registration.username' class="form-control" #username="ngModel" name="username" type="text"autofocus="" required="true" placeholder="Username" > 
            <i class="ico-append fa fa-user right-25"></i> 

            <div class='alert-danger' *ngIf="username.touched && username.invalid"> 
             username is required 
            </div>        
            <b class="tooltip tooltip-bottom-right">Needed to identify you during login</b>         
           </div>        
          </div> 
         </div>      
         <div class="form-group"> 
          <div class="row">           
           <div class="col-sm-12" [class.has-error]="password.touched && password.invalid">                                   
            <input [(ngModel)]='registration.password' class="form-control" #password="ngModel" name="password" type="password" pattern='^....+' required="true" placeholder="Password"> 
            <i class="ico-append fa fa-lock right-25"></i> 
            <div class='alert-danger' *ngIf="password.touched && password.invalid"> 
             Password must be atleast 4 characters long 
            </div> 
            <div class='alert-danger' *ngIf='password.touched && registration.password==""'> 
             Please enter a password 
            </div> 
            <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>          
           </div>        
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="row">           
           <div class="col-sm-12 " [class.has-error]="validateConfirmPassword(confirmPassword.touched)">                                  
            <input [(ngModel)]='registration.confirmPassword'           
             class="form-control" 
             #confirmPassword="ngModel" 
             name="confirmPassword" 
             type="password" 
             required="true" 
             placeholder="Confirm password"> 
            <i class="ico-append fa fa-lock right-25"></i>          
            <div class='alert-danger' *ngIf="registration.confirmPassword!=registration.password && confirmPassword.touched"> 
             Does not match password 
            </div>  
            <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>      
           </div>             
          </div>        
         </div> 
         <div class="form-group"> 
          <div class="row">           
           <div class="col-sm-12 " [class.has-error]="emailAddress.touched && emailAddress.invalid">                                   
            <input [(ngModel)]='registration.emailAddress' class="form-control" #emailAddress="ngModel" name="emailAddress" type="text" required="true" placeholder="Email address"> 
            <i class="ico-append fa fa-envelope right-25"></i> 
            <div class='alert-danger' *ngIf="emailAddress.touched && emailAddress.invalid"> 
             Email address is required 
            </div> 
            <b class="tooltip tooltip-bottom-right">Needed to verify your account</b>      
           </div>        
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="row">           
           <div class="col-sm-6 " [class.has-error]="firstName.touched && firstName.invalid">                                           
            <input [(ngModel)]='registration.firstName' class="form-control" #firstName="ngModel" name="firstName" type="text" required="true" placeholder="First name"> 
            <div class='alert-danger' *ngIf="firstName.touched && firstName.invalid"> 
             First Name is required 
            </div>                      
           </div>        
           <div class="col-sm-6" [class.has-error]="lastName.touched && lastName.invalid">                                                 
            <input [(ngModel)]='registration.lastName' class="form-control" #lastName="ngModel" name="lastName" type="text" required="true" placeholder="Last name"> 
            <div class='alert-danger' *ngIf="lastName.touched && lastName.invalid"> 
             Last Name is required 
            </div>                      
           </div>     
          </div> 
         </div> 
         <div class="select margin-bottom-10 margin-top-20"> 
          <div class="form-group" [class.has-error]='gender.touched && registration.gender=="default"'> 
           <select [(ngModel)]='registration.gender' class="form-control" #gender="ngModel" name="gender" > 
            <option value="default" default disabled>Gender</option> 
            <option value="Male">Male</option> 
            <option value="Female">Female</option> 
           </select> 
           <div class='alert-danger' *ngIf='gender.touched && registration.gender=="default"'> 
            Please select a Gender 
           </div>       
          </div> 
         </div>       
         <div class="margin-top-30"> 
          <div class="nomargin" >        
           <label class="checkbox nomargin has-error"> 
            <input [(ngModel)]='registration.acceptTerms' 
             (change)="validateTerms(!acceptTerms.value)" 
             class="checked-agree" 
             #acceptTerms="ngModel" 
             name="acceptTerms" 
             required="true" 
             type="checkbox"> 
            <i [class.checkbox-error]="displayTermsValidaionError" ></i> 
            I agree to the <a href="#" data-toggle="modal" data-target="#termsModal">Terms of Service</a> 
           </label> 
          </div>        
         </div>       
        </fieldset> 
        <div class="row margin-bottom-20"> 
         <div class="col-md-12"> 
          <button type="submit" class="btn btn-primary" (click)="register()" ><i class="fa fa-check"></i> REGISTER</button> 
         </div> 
        </div>  
        {{result.messageResult}} 
       </form> 

Answer 1

form.submittedプロパティは、フォームが送信されるかどうかを示します。テンプレートとして次のように使用できます：

<div class='alert-danger' *ngIf="form.submitted && username.invalid"> 
    username is required 
</div>