Question

HTML代码

验证完全无效，并且表单提交也无效。

下面是我正在使用的代码

我将表单组命名为customerForm，并在提交click事件时尝试收集所有表单值，但仅获取空值。

有人可以帮助确认验证问题吗？另外，即使我启用并单击了它，但它始终仅传递null值，因此我的提交按钮始终处于禁用状态。

我是新手。我的问题听起来很愚蠢，但我刚开始研究角度。

感谢您的帮助。

谢谢。

<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>

在这里，所有已定义的formcontrol和验证器，但对建立验证也无济于事。有没有我想念的外部参考资料？

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;
    }       

}

Answer 1

我找到了答案。

在html属性中，formcontrolName被错误地写入。由于它是区分大小写的，因此在正确编写 formControlName 后，问题已得到解决。

Asp.Net核心角度验证和提交表单不起作用

1 个答案: