Asp.Net 核心角度驗證和提交表單不起作用

Question

代碼

驗證根本不起作用，表單提交也不起作用。

以下是我正在使用的代碼

我命名了 formgroup customerForm 並在提交單擊事件時嘗試收集所有表單值，但它只獲得 null。

有人可以幫助確定驗證問題嗎？ 即使我啟用並單擊它只傳遞空值，我的提交按鈕也一直被禁用。

我是角度的新手。 我的問題可能聽起來很愚蠢，但我剛剛開始研究 angular。

任何幫助表示贊賞。

提前致謝。

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

在這里定義了所有表單控件和驗證器，但它也無助於建立驗證。 有沒有我錯過的外部參考？

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問題后得到修復。