验证预填充的输入字段 angular
Validating pre populated input field angular
我有以下代码:
<h1>New Book</h1>
<form #f="ngForm" (ngSubmit)="submit(f)">
<div class="form-group">
<label for="group">Group</label>
<select id="group" class="form-control" (change)="onGroupChange()" [(ngModel)]="groupId" name="groupId">
<option value=""></option>
<option *ngFor="let g of groups" value="{{g.id}}">{{g.name}}</option>
</select>
</div>
<div class="form-group">
<label for="registrationNumber">Registration Number</label>
<input required ngModel name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control" value={{regId}}/>
<div class="alert alert-danger" *ngIf="!registrationNumber && !registrationNumber.valid">Registration Number is required.</div>
</div>
<button class="btn btn-primary" [disabled]="!f.valid">Save</button>
</form>
如您所见,如果其中一个表单值无效,该按钮将被禁用。问题是当您在组下拉列表中选择一个组时,会填充注册号。即使在填写了注册号字段后,保存按钮仍然是 disabled.What 种验证,我应该在注册号的 *ngIf 中写入告诉 angular 如果该字段具有值,则将该字段标记为 ok .
换句话说,下面的ngIf应该放什么?
<div class="alert alert-danger" *ngIf=" ? "**>Registration Number is required.</div>
</div>
您需要使用 ngModel
设置值,然后验证应该会按预期进行。
<input required [ngModel]="regId" name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control"/>
此外,您可以使用空合并运算符
来简化 ngIf
<div class="alert alert-danger" *ngIf="!registrationNumber?.valid">Registration Number is required.</div>
我有以下代码:
<h1>New Book</h1>
<form #f="ngForm" (ngSubmit)="submit(f)">
<div class="form-group">
<label for="group">Group</label>
<select id="group" class="form-control" (change)="onGroupChange()" [(ngModel)]="groupId" name="groupId">
<option value=""></option>
<option *ngFor="let g of groups" value="{{g.id}}">{{g.name}}</option>
</select>
</div>
<div class="form-group">
<label for="registrationNumber">Registration Number</label>
<input required ngModel name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control" value={{regId}}/>
<div class="alert alert-danger" *ngIf="!registrationNumber && !registrationNumber.valid">Registration Number is required.</div>
</div>
<button class="btn btn-primary" [disabled]="!f.valid">Save</button>
</form>
如您所见,如果其中一个表单值无效,该按钮将被禁用。问题是当您在组下拉列表中选择一个组时,会填充注册号。即使在填写了注册号字段后,保存按钮仍然是 disabled.What 种验证,我应该在注册号的 *ngIf 中写入告诉 angular 如果该字段具有值,则将该字段标记为 ok .
换句话说,下面的ngIf应该放什么?
<div class="alert alert-danger" *ngIf=" ? "**>Registration Number is required.</div>
</div>
您需要使用 ngModel
设置值,然后验证应该会按预期进行。
<input required [ngModel]="regId" name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control"/>
此外,您可以使用空合并运算符
来简化ngIf
<div class="alert alert-danger" *ngIf="!registrationNumber?.valid">Registration Number is required.</div>