表单数组字段上的Angular 5表单验证
我正在从事一个项目,我想在表单数组字段上进行必要的验证。 这是我的模板表单数组字段上的Angular 5表单验证,angular,angular-reactive-forms,angular2-form-validation,Angular,Angular Reactive Forms,Angular2 Form Validation,我正在从事一个项目,我想在表单数组字段上进行必要的验证。 这是我的模板 <div formArrayName="price" *ngFor="let p of vehicleForm.get('prices.price').controls; let i=index"> <div class="price-form-repeater" [formGroupName]="i"> <div class="col-md
<div formArrayName="price" *ngFor="let p of vehicleForm.get('prices.price').controls; let i=index">
<div class="price-form-repeater" [formGroupName]="i">
<div class="col-md-6 col-sm-12 cust-col">
<label class="col-sm-4 dark-label" for="priceType">Price Type:</label>
<div class="col-md-6" >
<select id="priceType" formControlName="type" class="form-control" data-placeholder="select" >
<option ></option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="public">Public</option>
</select>
<div *ngIf="p.controls.type.errors && (p.controls['type'].dirty || p.controls['type'].touched)) ||
(p.controls['type'].untouched && formSubmitAttempt)"class="alert alert-danger">
<div [hidden]="(!p.controls['type'].errors.required)">Price type is required.</div>
</div>
</div>
</div>
</div>
</div>
如果用户试图将这些字段留空,我只想显示必填字段错误消息。我感谢你的帮助。你离答案很近了。price数组由
formGroup
元素组成,因此需要使用get(“”)
访问子控件。必须将*ngFor
指令置于中继器上。我还建议使用ngIf
而不是hidden,因为屏幕阅读器仍可能读取隐藏的元素
<div formArrayName="price" >
<div class="price-form-repeater" *ngFor="let p of vehicleForm.get('prices.price').controls; let i=index" [formGroupName]="i">
<div class="col-md-6 col-sm-12 cust-col">
<label class="col-sm-4 dark-label" for="priceType">Price Type:</label>
<div class="col-md-6" >
<select id="priceType" formControlName="type" class="form-control" data-placeholder="select">
<option ></option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="public">Public</option>
</select>
<div *ngIf="(p.get('type').errors && (p.get('type').dirty || p.get('type').touched)) ||
(p.get('type').untouched && formSubmitAttempt)" class="alert alert-danger">
<div *ngIf="p.get('type').errors.required">Price type is required.</div>
</div>
</div>
</div>
</div>
<div formArrayName="price" >
<div class="price-form-repeater" *ngFor="let p of vehicleForm.get('prices.price').controls; let i=index" [formGroupName]="i">
<div class="col-md-6 col-sm-12 cust-col">
<label class="col-sm-4 dark-label" for="priceType">Price Type:</label>
<div class="col-md-6" >
<select id="priceType" formControlName="type" class="form-control" data-placeholder="select">
<option ></option><!-- Required for data-placeholder attribute to work with Chosen plugin -->
<option value="public">Public</option>
</select>
<div *ngIf="(p.get('type').errors && (p.get('type').dirty || p.get('type').touched)) ||
(p.get('type').untouched && formSubmitAttempt)" class="alert alert-danger">
<div *ngIf="p.get('type').errors.required">Price type is required.</div>
</div>
</div>
</div>
</div>
get price() {
return this.vehicleForm.get('prices.price') as FormArray;
}