如何以角度比較formarray中的兩個輸入字段值？

Question

Html代碼:(在這個FormArray中，我有shipping_order_units，shipping_order_units =>假設shipment有10個，shipping應該小於或等於10..用戶不能輸入超過10個..我需要這樣驗證。 .)

      <div formArrayName="orderNumList" *ngFor="let item of orderNumArray.controls;let i=index;">
            <div [formGroupName]="i" class="add-div">
                      <mat-form-field>
                        <input matInput type="number" pattern="[0-9]*" placeholder="Shipping order 
                           product quantity" formControlName="shipment_product_order_qty" readonly>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput type="number" pattern="[0-9]*" placeholder="Shipment Order Units"
                            formControlName="shipment_order_units" readonly>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput type="number" pattern="^[1-9][0-9]*(\.[0-9]+)?|0+\.[0-9]*[1-9][0-9]*$" placeholder="Shipping Order Units"
                            formControlName="shipping_order_units" required>
                   </mat-form-field>
            </div>
       </div>

Component.ts:(在這個FormArray中，我有shipping_order_units，shipping_order_units =>假設shipment有10個，shipping應該小於或等於10..用戶不能輸入超過10個..我需要這樣驗證..)

    ngOninit(){
      this.packForm = new FormGroup ({
            'orderNumList':new FormArray([])
        });
         this.orderNumArray = this.packForm.get('orderNumList') as FormArray;
        this.addItem();
      }
      addItem(){
    this.orderNumArray.push(this.createItem());
  }
  createItem():FormGroup {
    return this.formBuilder.group({
       shipment_product_order_qty:new FormControl(null,Validators.required),
       shipment_order_units:new FormControl(null,Validators.required),
      shipping_order_units:new FormControl(null,Validators.required),
     });
  }

Answer 1

在這里，你需要實現Validators.max（）方法和需要得到的價值shipment_order_units並將其設置為最大值shipping_order_units 。

使用setValidators()方法，您可以像這樣進行驗證，

this.formGroup.controls.shipping_order_units.setValidators(Validators.compose([Validators.required, Validators.max(this.formGroup.controls.shipment_order_units.value)])); 

所以component.html文件想要，

<mat-toolbar color="primary">
  <span class="fill-remaining-space">My Reactive Form with Material</span>
</mat-toolbar>

<div class="container" *ngIf="!post; else forminfo" novalidate> 
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">

      <mat-form-field>
        <input matInput type="number" pattern="[0-9]*" placeholder="Shipping order product quantity" formControlName="shipment_product_order_qty" readonly>
      </mat-form-field>

        <span *ngIf="formGroup.controls.shipment_product_order_qty && formGroup.controls.shipment_product_order_qty.errors">
        <mat-error *ngIf="formGroup.controls.shipment_product_order_qty.errors.required">
          Shipping Product Order quantity is required
        </mat-error>
        </span>

      <mat-form-field>
        <input matInput type="number" pattern="[0-9]*" placeholder="Shipment Order Units"
            formControlName="shipment_order_units" readonly>
      </mat-form-field>


      <mat-form-field>
          <input matInput type="number" pattern="^[1-9][0-9]*(\.[0-9]+)?|0+\.[0-9]*[1-9][0-9]*$" max="5" placeholder="Shipping Order Units"
              formControlName="shipping_order_units" >
      </mat-form-field>

    <span *ngIf="formGroup.controls.shipping_order_units && formGroup.controls.shipping_order_units.errors">
      <mat-error *ngIf="formGroup.controls.shipping_order_units.errors.max"> Shipping Order Units value should be less than or equal to {{formGroup.controls.shipment_order_units.value}} </mat-error>
      <mat-error *ngIf="formGroup.controls.shipping_order_units.errors.required">
        Shipping Order Units is required
      </mat-error>
    </span>
  </form>
</div>

而component.ts文件將是，

export class AppComponent {

  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createForm();
  }

  createForm() {

    this.formGroup = this.formBuilder.group({
      'shipment_product_order_qty': [, [Validators.required]],
      'shipment_order_units': [10, Validators.required],
      'shipping_order_units': ['', [Validators.min(0)]]
    });

    this.formGroup.controls.shipping_order_units.setValidators(Validators.compose([Validators.required, Validators.max(this.formGroup.controls.shipment_order_units.value)]));      

  this.formGroup.get('shipping_order_units').valueChanges
  .subscribe(val => {
    if(!this.formGroup.get('shipping_order_units').errors){
    this.formGroup.get('shipment_product_order_qty').setValue(this.formGroup.get('shipping_order_units').value * 10);
    } else {
      this.formGroup.get('shipment_product_order_qty').setValue('');
    }
  }
);
}

}

這里將產品數量設置為10倍數到shipping_order_units ，您可以檢查valueChanges並且可以訂閱和設置數量的值，如果只有shipping_order_units有效，例如，

  this.formGroup.get('shipping_order_units').valueChanges
  .subscribe(val => {
    if(!this.formGroup.get('shipping_order_units').errors){
    this.formGroup.get('shipment_product_order_qty').setValue(this.formGroup.get('shipping_order_units').value * 10);
    } else {
      this.formGroup.get('shipment_product_order_qty').setValue('');
    }
  }

在這里工作的 Stackblitz 示例..

Answer 2

您只需要從字段中獲取值並將其與處理點擊事件的位置進行比較：

const a = this.form.controls['a'].value
const b = this.form.controls['b'].value

if(a >= b) { }

Answer 3

   for(let i = 0; i<this.orderNumArray.length; i++){ 
     this.orderNumArray.at(i).get('shipping_order_units')
       .setValidators(Validators.compose( [Validators.required, 
         Validators.max(this.orderNumArray.at(i).get('shipment_order_units').value)])); 
         this.packForm.updateValueAndValidity(); 
      }