您好如何在没有单击的提交按钮上验证我的角形表单 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 class="btn btn-primary" (click)="register()" ><i class="fa fa-check"></i> REGISTER</button>
</div>
</div>
{{result.messageResult}}
</form>
答案 0 :(得分：2)
form.submitted属性表示表单是否已提交。可以在模板中用作：
<div class='alert-danger' *ngIf="form.submitted && username.invalid">
username is required
</div>