将 attr.required 设置为 "CONDITION" 不会检查任何内容
Setting attr.required to "CONDITION" does not check anything
我正在创建一个表单,其中根据先前的条件(例如复选框)应该/不应该需要输入字段。
如果 required
属性设置为元素,所需的验证工作正常。如果我将 required
属性设置为 [attr.required]="CONDITION",它根本不会检查它。
这是一个 plnkr 示例:https://plnkr.co/edit/vPfmgvLxUjNyNXHtkY24
(基于hero example from the documentation)。
代码(相关部分):
<form #heroForm="ngForm">
<div class="form-group">
<label for="name">Required label Test</label>
<input type="checkbox" class="form-control" [(ngModel)]="cbReqired" name="cbReqired" id="cbReqired">
</div>
<div [hidden]="!cbReqired">Now the Textbox should be required! (<code>required="true"</code> is set!)</div>
<div class="form-group">
<label for="name">Name</label>
<input id="name" name="name" class="form-control" [attr.required]="cbReqired" [(ngModel)]="hero" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
<button type="button" class="btn btn-default" (click)="heroForm.resetForm({})">Reset</button>
</form>
您只需要使用 [required]
而不是 [attr.required]
。这是工作的plunker:https://plnkr.co/edit/B6dM2BvD3hMH3Skv6uy5?p=preview
我正在创建一个表单,其中根据先前的条件(例如复选框)应该/不应该需要输入字段。
如果 required
属性设置为元素,所需的验证工作正常。如果我将 required
属性设置为 [attr.required]="CONDITION",它根本不会检查它。
这是一个 plnkr 示例:https://plnkr.co/edit/vPfmgvLxUjNyNXHtkY24 (基于hero example from the documentation)。
代码(相关部分):
<form #heroForm="ngForm">
<div class="form-group">
<label for="name">Required label Test</label>
<input type="checkbox" class="form-control" [(ngModel)]="cbReqired" name="cbReqired" id="cbReqired">
</div>
<div [hidden]="!cbReqired">Now the Textbox should be required! (<code>required="true"</code> is set!)</div>
<div class="form-group">
<label for="name">Name</label>
<input id="name" name="name" class="form-control" [attr.required]="cbReqired" [(ngModel)]="hero" #name="ngModel">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button>
<button type="button" class="btn btn-default" (click)="heroForm.resetForm({})">Reset</button>
</form>
您只需要使用 [required]
而不是 [attr.required]
。这是工作的plunker:https://plnkr.co/edit/B6dM2BvD3hMH3Skv6uy5?p=preview