我正在使用带有表单验证器的Angular 5。我正在尝试验证选择下拉列表,以避免在用户没有从选择中选择项目的情况下发送表单。问题是验证不起作用。验证器对输入控件有效,但对下拉列表无效。
<div class="form-control">
<label class="form-control__label" for="accionReglas">País *</label>
<p-dropdown formControlName="paisDropdown" class="dropdown" [options]="countriesOptions" [readonly]="this.isReadOnly || filtersForm.get('nacInterRadioButton').value === 'N'" filter="true" placeholder="Seleccione su país" required="true"></p-dropdown>
<div *ngIf="filtersForm.get('paisDropdown').errors && (filtersForm.get('paisDropdown').dirty || filtersForm.get('paisDropdown').touched)">
<span *ngIf="filtersForm.get('paisDropdown').errors.required" class="form-control__msg-txt">El país es obligatorio.</span>
</div>
</div>
TypeScript代码:
import { FormBuilder, FormGroup, FormControl, Validators, Validator } from '@angular/forms';
this.filtersForm = this.fBuilder.group({
"cifInput": new FormControl("", [ Validators.required, Validators.maxLength(10) ]),
"paisDropdown": new FormControl([ Validators.required ])
});
非常感谢您!
答案 0 :(得分:0)
在提交表单上,您必须为每个控制器设置markAsTouched。
实时示例:https://stackblitz.com/edit/angular-obcju1
HTML:
<form [formGroup]="filtersForm" (ngSubmit)="onSubmit()">
<input type="text" formControlName="cifInput"/>
<span *ngIf="hasInputErrorRequired">Enter Input ...</span>
<span *ngIf="hasInputErrorMaxlength">maxlength Error ....</span>
<hr>
<label for="accionReglas">País *</label>
<p-dropdown
formControlName="paisDropdown"
[options]="countriesOptions"
placeholder="Seleccione su país">
</p-dropdown>
<span *ngIf="hasDropDownError">Enter Country ...</span>
<hr>
<button type="submit">submit</button>
</form>
TS:
export class AppComponent {
filtersForm: FormGroup;
countriesOptions = [
{label: 'New York', value: 'NY'},
{label: 'Rome', value: 'RM'},
{label: 'London', value: 'LDN'},
{label: 'Istanbul', value: 'IST'},
{label: 'Paris', value: 'PRS'}
];
constructor(private fBuilder: FormBuilder) {
this.filtersForm = this.fBuilder.group({
"cifInput": new FormControl("", [ Validators.required, Validators.maxLength(10) ]),
"paisDropdown": new FormControl("", [ Validators.required ])
});
}
onSubmit() {
for (let controller in this.filtersForm.controls) {
this.filtersForm.get(controller).markAsTouched();
}
if(this.filtersForm.valid) {
console.log('Ok')
} else {
console.log('No')
}
}
get hasDropDownError() {
return (
this.filtersForm.get('paisDropdown').touched &&
this.filtersForm.get('paisDropdown').errors &&
this.filtersForm.get('paisDropdown').errors.required
)
}
get hasInputErrorRequired() {
const controller = this.filtersForm.get('cifInput');
return controller.touched && controller.errors && controller.errors.required
}
get hasInputErrorMaxlength() {
const controller = this.filtersForm.get('cifInput');
return controller.touched && controller.errors && controller.errors.maxlength
}
}
答案 1 :(得分:0)
HTML:-
<input class="form-control" type="text" formControlName="price" />
<div class="alert alert-danger"
*ngIf="createForm.controls.price.hasError('required') &&
createForm.controls.price.touched ||
createForm.controls.price.dirty)">
Price Required
</div>
Ts:-
this.createForm = this.formBuilder.group({
'price':['', [Validators.maxLength(100)],
'FruitType':['', [Validators.maxLength(100)]
});
当下拉值更改时,添加对价格字段的验证。
this.createForm.controls['FruitType'].valueChanges.subscribe(value => {
if(value !== '') {
this.createForm.get('price').setValidators([Validators.required]);
this.createForm.controls['price'].updateValueAndValidity();
} else {
this.createForm.get('price').clearValidators();
this.createForm.controls['price'].updateValueAndValidity();
}
});