Проверка реактивных форм

Question

компонент. html

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

export class CheckoutComponent implements OnInit {
  checkoutFormGroup:FormGroup;
  
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.checkoutFormGroup = this._formBuilder.group({
      customer: this._formBuilder.group({
        firstName: ['',Validators.required],
        lastName: ['',Validators.required],
        email: ['',[Validators.required,Validators.email]]
      }),
      shippingAddress: this._formBuilder.group({
        street: ['',Validators.required],
        city: ['',Validators.required],
        state:['',Validators.required],
        country: ['',Validators.required],
        zipcode: ['',Validators.required]
      }),
      billingAddress: this._formBuilder.group({
        street: ['',Validators.required],
        city: ['',Validators.required],
        state:['',Validators.required],
        country: ['',Validators.required],
        zipcode: ['',Validators.required]
      })
    })

  }

  onSubmit(){
    console.log('purchase book');
    console.log(this.checkoutFormGroup.get('customer').value);
    console.log(this.checkoutFormGroup.get('shippingAddress').value);
    console.log(this.checkoutFormGroup.get('billingAddress').value);
    
  }

  copyShippingAddressToBillingAddress(event){
    
    if (event.target.checked) {     
      this.checkoutFormGroup.controls.billingAddress
      .setValue(this.checkoutFormGroup.controls.shippingAddress.value);
    } else {
      this.checkoutFormGroup.controls.billingAddress.reset();
    }
  }

}

В компоненте. html создание формы оформления заказа для пользователя.
В файле component.ts i я использую реактивные формы для отправки данных формы
Я применил валидаторы для каждого поля, но я не могу проверить его, я не знаю, как это сделать.
Я пытаюсь проверить эту форму .....
Я применил валидаторы, что мне делать дальше? заранее спасибо :)

Answer 1

Вы можете проверить действительность формы, используя форму действительный значение состояния

this.checkoutFormGroup.valid

Таким образом, ваш onSubmit должен быть

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

Вы также можете проверить каждый товар действителен или нет по

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

Answer 2

Вы можете проверить действительный статус формы в целом, а также отдельных элементов управления.

Попробуйте:

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

Чтобы понять это подробнее, пожалуйста, от go до https://angular.io/guide/form-validation