Javascript 如何在6中验证提交时的表单输入
在Angular应用程序中,我设置了表单验证程序,但我希望表单验证在Submit上完成。因此,当用户单击submit且表单无效时,将显示Javascript 如何在6中验证提交时的表单输入,javascript,angular,Javascript,Angular,在Angular应用程序中,我设置了表单验证程序,但我希望表单验证在Submit上完成。因此,当用户单击submit且表单无效时,将显示ngIf错误。到目前为止,我的代码是: 组件。ts import { Component, OnInit } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { FormGroup, FormControl } from '@angular/fo
ngIf
错误。到目前为止,我的代码是:
组件。ts
import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Request } from '../../models/request.model'
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from '../../../app.component';
import { ServicenowService } from '../../services/servicenow.service';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
@Component({
selector: 'app-service-request',
templateUrl: './service-request.component.html',
styleUrls: ['./service-request.component.scss']
})
export class ServiceRequestComponent implements OnInit {
public loading = false;
private customer_id = this.appComponent.customer_id;
serviceForm;
u_destination_country = [
{ value: 'Choose an option' },
{ value: 'United Kingdom', },
{ value: 'United States of America', },
{ value: 'Russia', },
{ value: 'Moscow', },
{ value: 'Africa', },
];
users = [
{ id: 'Select an option', },
{ id: '1', },
{ id: '2', },
{ id: '3', },
];
devices = [
{ id: 'Select an option', },
{ id: '1', },
{ id: '2', },
{ id: '3', },
];
constructor(private service: ServicenowService,
private appComponent: AppComponent,
private router: Router,
private http: HttpClient
) {
}
ngOnInit() {
this.serviceForm = new FormGroup({
customer_id: new FormControl(this.customer_id),
//u_caller_id: new FormControl(this.users[0], Validators.required),
siebel_id: new FormControl('', Validators.required),
u_destination_country: new FormControl(this.u_destination_country[0], Validators.required),
u_phone_number: new FormControl('', Validators.required),
//u_serial_number: new FormControl(this.devices[0], Validators.required),
u_short_description: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(5),
Validators.maxLength(80)
])),
u_message_description: new FormControl('', Validators.required),
});
}
onSubmit() {
this.http.post("/api/inc",
this.serviceForm.value,
{
headers: new HttpHeaders().set("Content-Type", "application/json")
}
).subscribe((response: any) => {
console.log(response);//On success response
this.router.navigate(['/incident/confirmation']);
}, (errorResponse: any) => {
console.log(errorResponse);//On unsuccessful response
});
}
}
要在模板级别进行保护,可以使用
<button type="submit" [disabled]="serviceForm.invalid">Submit</submit>
<div class="error" *ngIf="serviceForm.hasError('yourErrorName')">
Some text
</div>
您可以使用该属性告诉Angular在submit
上运行验证功能
只需添加属性(也可以应用于formControl
或formArray
):
此外,别忘了保护您的提交功能:
onSubmit() {
if (this.serviceForm.valid) {
...
}
}
检查是否可以添加(部分)html以确保完整性?
this.serviceForm = new FormGroup({
customer_id: new FormControl(this.customer_id),
...
}, { updateOn: 'submit' });
onSubmit() {
if (this.serviceForm.valid) {
...
}
}