Как сравнить значения двух полей ввода внутри formarray в angular?

Question

Html Код: (В этом FormArray у меня есть shipment_order_units, shipping_order_units => предположим, что отправка имеет 10, отправка должна быть меньше или равна 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 у меня есть shipment_order_units, shipping_order_units => предположим, что отправка имеет 10, доставка должна быть меньше или равна 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)])); 

Итак, компонент . 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

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

Answer 3

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

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

if(a >= b) { }