Question

我有以下代码：

<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>

如您所见，如果其中一个表单的值无效，则会禁用该按钮。问题是当您在组下拉列表中选择组时，将填充注册号。即使在填充注册号字段之后，仍然禁用了保存按钮。我应该在注册号的* ngIf中写入什么样的验证来告诉angular如果字段有值，则将字段标记为ok。

换句话说，下面的ngIf应该包含哪些内容？

<div class="alert alert-danger" *ngIf=" ? "**>Registration Number  is required.</div>
    </div>

Answer 1

您需要使用ngModel设置值，然后验证应按预期工作。

<input required [ngModel]="regId" name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control"/>

另外，您可以使用null-coalescing运算符

来简化ngIf

<div class="alert alert-danger" *ngIf="!registrationNumber?.valid">Registration Number  is required.</div>

验证预填充的输入字段角度

1 个答案: