Angular Asp.Net核心验证和提交表单不起作用
HTML代码 验证根本不起作用,表单提交也不起作用 下面是我正在使用的代码 我将formgroup命名为customerForm,并在提交click事件时尝试收集所有表单值,但仅获取null 是否有人可以帮助识别验证问题?此外,我的提交按钮一直处于禁用状态,即使我启用并单击它,它只传递空值 我是个新手。我的问题听起来可能很傻,但我刚刚开始研究这个问题 感谢您的帮助 提前谢谢Angular Asp.Net核心验证和提交表单不起作用,angular,asp.net-core,Angular,Asp.net Core,HTML代码 验证根本不起作用,表单提交也不起作用 下面是我正在使用的代码 我将formgroup命名为customerForm,并在提交click事件时尝试收集所有表单值,但仅获取null 是否有人可以帮助识别验证问题?此外,我的提交按钮一直处于禁用状态,即使我启用并单击它,它只传递空值 我是个新手。我的问题听起来可能很傻,但我刚刚开始研究这个问题 感谢您的帮助 提前谢谢 <div class="col-lg-12 grid-margin"> <div class="ca
<div class="col-lg-12 grid-margin">
<div class="card">
<div class="card-body">
<h2 class="card-title">Add new customer</h2>
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<form class="form-customer" [formGroup]="customerForm" (ngSubmit)="saveCustomer(customerForm.value)" novalidate>
<div class="row">
<div class="col-lg-6">
<div class="form-group" [ngClass]="{'is-invalid':!ValidateName()}">
<label>Name</label>
<input type="text" name="Name" id="Name" class="form-control" formcontrolName="Name" placeholder="Name" />
<em *ngIf="!ValidateName() && customerForm.controls.Name.errors.required">required</em>
</div>
</div>
<div class="col-lg-6">
<div class="form-group" [ngClass]="{'is-invalid':!ValidateEmail()}">
<label>Email</label>
<input type="text" name="Email" class="form-control" formcontrolName="Email" placeholder="Email" />
<em *ngIf="!ValidateEmail() && customerForm.controls.Email.errors.required">required</em>
<em *ngIf="!ValidateEmail() && customerForm.controls.Email.errors.pattern">Enter valid email</em>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group" [ngClass]="{'is-invalid':!ValidateContactNo()}">
<label>Contact No</label>
<input name="ContactNo" type="text" class="form-control" formcontrolName="ContactNo" placeholder="ContactNo" />
<em *ngIf="!ValidateContactNo() && customerForm.controls.ContactNo.errors.required">required</em>
<em *ngIf="!ValidateContactNo() && customerForm.controls.ContactNo.errors.pattern">Enter valid contactno</em>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Address</label>
<input type="text" name="Address" class="form-control" formcontrolName="Address" placeholder="Address" maxlength="500" />
</div>
</div>
</div>
<button type="submit" class="btn-primary btn-submit pull-right" [disabled]="customerForm.invalid">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
我找到了答案
在html属性formcontrolName中写入错误。由于区分大小写,因此正确写入formControlName后,问题得到了解决
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CustomerserviceService } from '../customerservice.service';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
constructor(private cust: CustomerserviceService) {
}
// convenience getter for easy access to form fields
get f() { return this.customerForm.controls; }
data: any;
customerForm: FormGroup;
Name: FormControl;
Email: FormControl;
Address: FormControl;
ContactNo: FormControl;
ngOnInit() {
const emailRegex = "\A(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)\Z";
const phoneRegex = "^[7-9][0-9]{9}$";
this.Name = new FormControl('', [Validators.required]);
this.Email = new FormControl('', Validators.compose([Validators.required, Validators.pattern(emailRegex)]));
this.ContactNo = new FormControl('', Validators.compose([Validators.required, Validators.pattern(phoneRegex)]));
this.Address = new FormControl();
this.customerForm = new FormGroup({
Name: this.Name,
Email: this.Email,
Address: this.Address,
ContactNo: this.ContactNo
})
}
saveCustomer(obj: any) {
debugger;
this.cust.saveCustomer(obj).subscribe((data): any => {
if (data) {
alert("Data Saved Successfully");
this.getAllCustomer();
}
this.customerForm.reset();
});
}
ValidateName() {
return this.Name.valid || this.Name.untouched;
}
ValidateEmail() {
return this.Email.valid || this.Email.untouched;
}
ValidateContactNo() {
return this.ContactNo.valid || this.ContactNo.untouched;
}
}