Question

component.html

attributes

component.ts

   <form [formGroup] = "checkoutFormGroup" (ngSubmit)="onSubmit()">
    
      <div formGroupName="customer">
        <input type="text" class="form-control" formControlName="firstName">
        <input type="text" class="form-control" formControlName="lastName" >
        <input type="email" class="form-control" formControlName="email" >
        <input type="text" class="form-control" formcontrolName="phone" placeholder="Phone Number">
      </div>
      <h2 class="h3 mb-3 text-black">Shpping Address</h2>    
      
      <div formGroupName="shippingAddress">
       <select formControlName="country" class="form-control">
        <option value="">Choose...</option>
        <option>India</option>
        <option>United States</option>
       </select>
    
        <input type="text" class="form-control" formControlName="state">
        <input type="text" class="form-control" formControlName="city">
        <input type="text" class="form-control" formControlName="zipcode">
        <input type="text" class="form-control" formControlName="street" placeholder="Street address">
    
       </div>
      
       <label class="form-check text-black">
        <input (change)="copyShippingAddressToBillingAddress($event)" onchange="valueChanged()" 
              type="checkbox" class="form-check-input" type="checkbox" > Shipping address is the same as my 
               billing address?
       </label>
    
       <h2 class="h3 mb-3 text-black">Billing Address</h2>
        
      <div formGroupName="billingAddress">
       <select formControlName="country" class="form-control">
        <option value="">Choose...</option>
        <option>India</option>
        <option>United States</option>
       </select>
    
       <input type="text" class="form-control" formControlName="state">
       <input type="text" class="form-control" formControlName="city">
     
        <input type="text" class="form-control" formControlName="zipcode">
        
        <input type="text" class="form-control" formControlName="street" placeholder="Street address">
    
      </div>
    
       <button type="submit" class="btn btn-primary btn-lg py-3 btn-block">Place Order</button>
    
    </form>

在component.html中为用户生成结帐表单。
在component.ts文件中，我使用反应式表单来提交表单数据
我已经为每个字段应用了验证器，但是我不知道如何验证它。
我正在尝试验证此表格.....
我应用了验证器，接下来我要做什么？在此先感谢：）

Answer 1

您可以检查整个表单及其各个控件的有效状态。

尝试：

console.log(this.checkoutFormGroup.valid);
console.log(this.checkoutFormGroup.get('customer').valid);

要了解更多信息，请通过https://angular.io/guide/form-validation

Answer 2

您可以使用表单 valid 状态值

检查表单的有效性。

this.checkoutFormGroup.valid

所以您的onSubmit应该是

onSubmit(){
    if(this.checkoutFormGroup.valid){
       //process your form action
      }
   else {
        return false;
        }
      
  }

您还可以通过以下方式检查每个项目是否有效

this.checkoutFormGroup.get('customer').valid

反应式表单验证

2 个答案: