我使用了角度反应来自。但是当我在提交表单后重置表单时,验证程序无效并显示无效的表单样式。 如何重置验证器? 任何人都可以帮我解决这个问题。
答案 0 :(得分:2)
this.form.reset()
提交后可以使用两种方法
this.form.updateValueAndValidity()
答案 1 :(得分:1)
取自Resetting a form in Angular 2 after submit
> = RC.6
支持重置表单并维持submitted
状态。
console.log(this.form.submitted);
this.form.reset()
或
this.form = new FormGroup()...;
重要更新
要将表单控件设置为创建表单时的状态,例如验证程序,则需要进行一些其他测量
在表单(html)的视图部分中,添加*ngIf
以显示或隐藏表单
<form *ngIf="showForm"
在表单(* .ts)的组件侧执行此操作
showForm:boolean = true;
onSubmit(value:any):void {
this.showForm = false;
setTimeout(() => {
this.reset()
this.showForm = true;
});
}
这是一个更详细的示例:
export class CreateParkingComponent implements OnInit {
createParkingForm: FormGroup ;
showForm = true ;
constructor(
private formBuilder: FormBuilder,
private parkingService: ParkingService,
private snackBar: MatSnackBar) {
this.prepareForm() ;
}
prepareForm() {
this.createParkingForm = this.formBuilder.group({
'name': ['', Validators.compose([Validators.required, Validators.minLength(5)])],
'company': ['', Validators.minLength(5)],
'city': ['', Validators.required],
'address': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
'latitude': [''],
'longitude': [''],
'phone': ['', Validators.compose([Validators.required, Validators.minLength(7)])],
'pictureUrl': [''],
// process the 3 input values of the maxCapacity'
'pricingText': ['', Validators.compose([Validators.required, Validators.minLength(10)])],
'ceilingType': ['', Validators.required],
});
}
ngOnInit() {
}
resetForm(form: FormGroup) {
this.prepareForm();
}
createParkingSubmit() {
// Hide the form while the submit is done
this.showForm = false ;
// In this case call the backend and react to the success or fail answer
this.parkingService.create(p).subscribe(
response => {
console.log(response);
this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
setTimeout(() => {
//reset the form and show it again
this.prepareForm();
this.showForm = true;
});
}
, error => {
console.log(error);
this.showForm = true ;
this.snackBar.open('ERROR: al crear Parqueadero:' + error.message);
}
);
}
}
原始<= RC.5 只需将创建表单的代码移到方法上,并在处理了提交之后再次调用它即可:
@Component({
selector: 'form-component',
template: `
<form (ngSubmit)="onSubmit($event)" [ngFormModel]="form">
<input type="test" ngControl="name">
<input type="test" ngControl="email">
<input type="test" ngControl="username">
<button type="submit">submit</button>
</form>
<div>name: {{name.value}}</div>
<div>email: {{email.value}}</div>
<div>username: {{username.value}}</div>
`
})
class FormComponent {
name:Control;
username:Control;
email:Control;
form:ControlGroup;
constructor(private builder:FormBuilder) {
this.createForm();
}
createForm() {
this.name = new Control('', Validators.required);
this.email = new Control('', Validators.required);
this.username = new Control('', Validators.required);
this.form = this.builder.group({
name: this.name,
email: this.email,
username: this.username
});
}
onSubmit(value:any):void {
// code that happens when form is submitted
// then reset the form
this.reset();
}
reset() {
this.createForm();
}
}
答案 2 :(得分:0)
您可以使用setValidators:
示例:
ngOnInit() {
this.form = this.formBuilder.group({
name: ['', Validators.required],
nickname: ['', Validators.required]
});
}
...
updateValidators() {
this.get('nickname').setValidators([]);
this.form.updateValueAndValidity();
}