了解表单上检查的内容并像 POS 一样在其上添加价格的最佳方法是什么？ [角度/TS]

Question

如果我要计算添加到购物车或其他东西的东西，除了许多 if 语句之外，最好的方法是什么 表格

acidBody: false
acidGlass: false
asphaltRemoval: false
ceilingDetail: false
ceramicBooster: false
ceramicCoating: false
clayBar: false
engineDetail: false
exteriorDetailing2: false
exteriorDetailing3: false
fullAcidCoating: false
fullDetail: false
glassCeramic: false
glassDetail: false
handWax: false
id: 1
interiorDetailing: false
machineWax: false
premiumWash: false
seatCleaning: true
size: "medium"
wax: false
wheelDetail: true

这是提交表格后我将获得的价值

我将在这里比较它们，以便获得价格（这些是我将从数据库获得的数据）

    { 
      name : "small", 
      price : 150
     
    },
    { 
      name : "medium", 
      price : 180
     
    },
    { 
      name : "large", 
      price : 200
    },
    { 
      name : "xl", 
      price : 220
    },{ 
      name : "motor", 
      price : 100
    },{
      name: "wax",
      price: 300
    }
    //and so on

我不想做类似的事情

如果 form.value.size == 'small' 那么价格 = 150 并确认所有这些

有没有简单的方法可以做到这一点？

蜡怎么样？如果蜡 == true 那么价格 = 300 但没有比较所以我不知道如何做到这一点

我尝试循环，但无法获得唯一的比较来确定每件商品的价格

编辑： html:

  <form [formGroup]="carWashForm" (ngSubmit)="onSubmit1()" [validated]="customStylesValidated" cForm class="row g-3 needs-validation">
          <c-col xs="12" (change)="subTotal()">
            <c-form-check inline>
              <input cFormCheckInput checked id="size" formControlName="size" value="small" type="radio" />
              <label cFormCheckLabel for="small">Small</label>
            </c-form-check>
            <c-form-check inline>
              <input cFormCheckInput id="size" formControlName="size" value="medium" type="radio" />
              <label cFormCheckLabel for="medium">Medium</label>
            </c-form-check>
            <c-form-check inline>
              <input cFormCheckInput id="size" formControlName="size" value="large" type="radio" />
              <label cFormCheckLabel for="size">Large</label>
            </c-form-check>
            <c-form-check inline>
              <input cFormCheckInput id="size" formControlName="size" value="xl" type="radio" />
              <label cFormCheckLabel for="size">XL</label>
            </c-form-check>
            <c-form-check inline>
              <input cFormCheckInput checked id="motor" formControlName="size" value="motor" type="radio" />
              <label cFormCheckLabel for="motor">Motor</label>
            </c-form-check>
          </c-col>
          <c-col xs="1">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="wax" (change)="subTotal()" type="checkbox" formControlName="wax" />
              <label cFormCheckLabel for="wax">Wax?</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="premiumWash" formControlName="premiumWash" type="checkbox" />
              <label cFormCheckLabel for="premiumWash">Premium Wash?</label>
            </c-form-check>
          </c-col>
          <c-col xs="12">
            <p class="text-body-secondary big">
              <strong>Select Add-ons</strong>
            </p>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="handWax" (change)="subTotal()" type="checkbox" formControlName="handWax" />
              <label cFormCheckLabel for="handWax">Hand Wax</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="machineWax" (change)="subTotal()" type="checkbox" formControlName="machineWax" />
              <label cFormCheckLabel for="machineWax">Machine Wax</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="asphaltRemoval" (change)="subTotal()" type="checkbox" formControlName="asphaltRemoval" />
              <label cFormCheckLabel for="asphaltRemoval">Asphalt Removal</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="clayBar" (change)="subTotal()" type="checkbox" formControlName="clayBar" />
              <label cFormCheckLabel for="clayBar">Clay Bar</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="acidGlass" (change)="subTotal()" type="checkbox" formControlName="acidGlass" />
              <label cFormCheckLabel for="acidGlass">Acid Rain Removal - Glass</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="acidBody" (change)="subTotal()" type="checkbox" formControlName="acidBody" />
              <label cFormCheckLabel for="acidBody">Acid Rain Removal - Body</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="glassDetail" (change)="subTotal()" type="checkbox" formControlName="glassDetail" />
              <label cFormCheckLabel for="glassDetail">Glass Detail</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="glassCeramic" (change)="subTotal()" type="checkbox" formControlName="glassCeramic" />
              <label cFormCheckLabel for="glassCeramic">Glass Detail with Glass Coating</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="fullAcidCoating" (change)="subTotal()" type="checkbox" formControlName="fullAcidCoating" />
              <label cFormCheckLabel for="fullAcidCoating">Full Acid Rain Removal and Coating</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="ceilingDetail" (change)="subTotal()" type="checkbox" formControlName="ceilingDetail" />
              <label cFormCheckLabel for="ceilingDetail">Ceiling Detailing</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="seatCleaning" (change)="subTotal()" type="checkbox" formControlName="seatCleaning" />
              <label cFormCheckLabel for="seatCleaning">Seat Cleaning</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="interiorDetailing" (change)="subTotal()" type="checkbox" formControlName="interiorDetailing" />
              <label cFormCheckLabel for="interiorDetailing">Interior Detailing</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="exteriorDetailing2" (change)="subTotal()" type="checkbox" formControlName="exteriorDetailing2" />
              <label cFormCheckLabel for="exteriorDetailing2">Exterior Detailing 2 Step</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="exteriorDetailing3" (change)="subTotal()" type="checkbox" formControlName="exteriorDetailing3" />
              <label cFormCheckLabel for="exteriorDetailing3">Exterior Detailing 3 Step</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="fullDetail" (change)="subTotal()" type="checkbox" formControlName="fullDetail" />
              <label cFormCheckLabel for="fullDetail">Full Detail</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="engineDetail" (change)="subTotal()" type="checkbox" formControlName="engineDetail" />
              <label cFormCheckLabel for="engineDetail">Engine Detailing</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="wheelDetail" (change)="subTotal()" type="checkbox" formControlName="wheelDetail" />
              <label cFormCheckLabel for="wheelDetail">Wheel Detailing</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="ceramicCoating" (change)="subTotal()" type="checkbox" formControlName="ceramicCoating" />
              <label cFormCheckLabel for="ceramicCoating">Ceramic Coating</label>
            </c-form-check>
          </c-col>
          <c-col xs="2">
            <c-form-check class="mb-3">
              <input cFormCheckInput id="ceramicBooster" (change)="subTotal()" type="checkbox" formControlName="ceramicBooster" />
              <label cFormCheckLabel for="ceramicBooster">Ceramic Booster</label>
            </c-form-check>
          </c-col>
          <!-- Total Price -->
          <c-col xs="12">
            <p class="text-body-secondary big">
              <strong>Total Price: {{totalPrice}}</strong>
            </p>
          </c-col>
          <c-col xs="12">
            <c-form-check>
              <input cFormCheckInput id="invalidCheck" name="invalidCheck" required type="checkbox" />
              <label cFormCheckLabel for="invalidCheck">Agree to terms and conditions</label>
            </c-form-check>
            <c-form-feedback [valid]="false">You must agree before submitting.</c-form-feedback>
          </c-col>
          <c-col xs="12">
            <button cButton class="me-1" color="primary" type="submit"> Submit form </button>
            <button (click)="onReset1()" cButton color="secondary" type="reset"> Reset </button>
          </c-col>
        </form>

组件：

subTotal() {
    let info = this.carWashForm.value;
    Object.keys(info).forEach((key) => {
      const keyWithType = key as keyof typeof info;
      let value = info[keyWithType];
      if (typeof value === "string" && value === "") {
        info = { ...info, [keyWithType]: false };
      }

    });
    if(value === true){
}
  }

Answer 1

我想你可以参数化你的数据。

想象你有几个数组

sizes= [{label:"Small",value:"small",price:150},
        {label:"Medium",value:"medium",price:180},
         ...
       ]
was=   [{label:"Was?",value:"was",price:80},
        {label:"PremiumWas?",value:"premiumWas",price:90}
       ]
addsOn=[{label:"Hand wax",value:"handWax",price:90},
        {label:"MachineWax",value:"machineWax",price:98},
        {label:"Asphal Removal",value:"asphaltRemoval",price:120},
        ...
       ]

您的表格可以很简单

  form = new FormGroup({
    size: new FormControl(''),
    was: new FormArray(this.was.map((x) => new FormControl(false))),
    addsOn: new FormArray(this.addsOn.map((x) => new FormControl(false))),
  });

您收到了数据，请填写表格

  fillForm(data:any){
    const value:any={size:data.size,
                 was:[data.was,data.premiumWas],
                 addsOn:[]
                 }
    Object.keys(data).forEach(key=>{
        const index=this.addsOn.findIndex(a=>a.value==key);
        if (index>=0)
            value[index]=data[key]
    })
    this.form.patchValue(value)
  }

当您有表格时，您可以获取数据

 getData(value:any)
 {
    const data:any={size:value.size,
                was:value?.was[0],
                premiumWas:value.was[1]
                }
    value.addsOn.forEach((x:boolean,i:number)=>{
        data[this.addsOn[i].value]=x
    })
    return data;    
 }
//you call as
   this.getData(this.form.value)

现在计算总数更容易了（此外，您可以使用 *ngFor 来显示表格。

 getPrice(value:any)
 {
    let price=(this.sizes.find(x=>x.value==this.form.value.size)||{price:0}).price
    price+=value.was[0]?this.was[0].price:0
    price+=value.was[1]?this.was[1].price:0
    value.addsOn.forEach((x:boolean,i:number)=>{
        if (x)
          price+=this.addsOn[i].price;
    })
    return price;
 }

//you call as
 getPrice(this.form.value)

参见stackblitz