Angular 7验证卡片中的项目，但不验证表单中的其他卡片

Question

我正在使用 bootstrap 的卡片 html 构建一个购物车。在卡片中，我做了一个表单标签，我有一个 *ngFor="let 服装 of this.apparealData" 来在自己的卡片中呈现每个项目。我在尝试仅将验证隔离到正在使用的卡时遇到问题。使用下面显示的代码，当前添加项目时，我只是验证是否需要性别。如果单击添加按钮时未选中，则每张卡片都会显示需要性别的验证。我只希望您尝试添加的项目验证卡片的性别。不是他们所有人。

'''

 <form [formGroup]="apparelForm">
      <div *ngFor="let apparel of this.apparealData" class="card">
        <div class="row">
          <div class="col">
            <h3>{{apparel.item}}</h3>
            <p class="product-description">{{this.apparel.description}}</p>
            <div class="row">
              <div class="col-3">
                <h6>Price:</h6>
              </div>
              <div class="col pt-1">
                <span class="teal font-weight-bold">{{this.apparel.price | currency}}</span>
              </div>
            </div>
            <!-- <div *ngIf="apparel.item !== '467 Baseball Hat'"> -->
            <div class="form-row row">
              <div class="col-3">
                <h6>gender: </h6>
              </div>
              <div class="form-group col-3 pt-1">
                <select class="form-control" formControlName="genderCtrl"
                  [ngClass]="{ 'is-invalid':submitted && f.genderCtrl.invalid }" required>
                  <option selected disabled value="">Choose...</option>
                  <option>Mens</option>
                  <option>Womens</option>
                </select>
                <div *ngIf="f.genderCtrl.invalid" class="invalid-feedback">
                  <div *ngIf="f.genderCtrl.errors.required">Gender is required</div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-3">
                <h6 class="sizes">sizes:</h6>
              </div>
              <div class="col-3 pt-1">
                <select id="sizeCtrl" formControlName="size">
                  <option selected disabled value="">Choose...</option>
                  <option *ngFor="let s of sizes" [value]="s"> {{s}}</option>
                </select>
              </div>
              <div class="col pt-2">
                <span *ngIf="this.apparel.upCharge" class="teal small-text">Add {{this.apparel.upCharge | currency}} for
                  XXL</span>
              </div>
            </div>
            <!-- <div *ngIf="f.size.errors" class="invalid-feedback">
              <div *ngIf="f.size.errors"> Size Is Required</div>
            </div> -->
            <!-- </div> -->
            <div *ngIf="apparel.nameCharge" class="mb-2">
              <div class="row pt-2">
                <div class="col-3">
                  <h6 class="mr-1" style="display: inline-block;">Add Name?</h6>
                </div>
                <div class="col pt-1">
                  <mat-checkbox aria-label="shirt can have name on sleeve" name="canHaveName"
                    formControlName="canHaveNameCtl">Yes</mat-checkbox>
                </div>
              </div>
              <div class="row">
                <div class="col-3 pt-3">
                  <h6>Name: </h6>
                </div>
                <div class="col-5 pt-2">
                  <input class="form-control name" name='nameOnSleeve' type='text' formControlName="sleeveNameCtrl"
                    [ngClass]="{ 'is-invalid':hasError }">
                </div>
                <div class="col pt-3">
                  <span class="teal small-text">Additonal {{this.apparel.nameCharge | currency}} </span>
                </div>
              </div>

            </div>
            <div *ngIf="hasError" class="invalid-feedback">
              <p> Name Is Required</p>
            </div>
            <div class="row">
              <div class="col-3">
                <h6>QUANTITY: </h6>
              </div>
              <div class="col pt-1">
                <select id="quantity" formControlName="quantityCtrl">
                  <option selected disabled value="">Choose...</option>
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </div>
            <div class="action pt-2 d-flex justify-content-end">
              <button class="btn btn-secondary" type="button" (click)="addItemToCart(apparel)">add to
                cart</button>
            </div>
          </div>
          <div class="col">
            <div>
              <!-- <img [src]="'data:image/png;base64,'+ this.imageData.image" /> -->
              <img [src]=this.apparel.image />
            </div>
          </div>
        </div>
      </div>
    </form>'''

Answer 1

我找到了答案。我需要创建一个包含表单和卡片代码的卡片组件，然后在我的原始页面中使用 ngFor 循环添加该组件。简而言之，每张卡片都需要自己的表单组来处理所有验证。

Answer 2

使用来自 ngFor 的变量。

如果 this.apparel.gender 为 null，您可以禁用该按钮

[disabled]="!apparel.gender"