Question

我有这样一种情况，我需要像这样从最底部的行添加行并从最顶部的行删除行

例如1：最初

第1行添加

例如2：添加一行后

第1行删除

第2行添加

如何使用下面的代码ngIf不接受条件来实现此目标。请建议我该怎么做。

*。component.html

<div class="container">
  <div class="row">
    <div class="col-lg-12">

      <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
        <div class="form-group">
          <div class="row">
            <span class="col-lg-4">Program Name </span>
            <span class="col-lg-4">Start Date </span>
            <span class="col-lg-4">End Date </span>
          </div>
          <div class="row">
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="programName">
            </span>
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="startDate">
            </span>
            <span class="col-lg-4">
              <input type="text" class="form-control" formControlName="endDate">
            </span>
          </div>
          <div class="row">
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.programName.valid" class="text-danger">
                Program Name is required.
              </small>
            </span>
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.startDate.valid" class="text-danger">
                Start Date is required.
              </small>
            </span>
            <span class="col-lg-4">
              <small *ngIf="!myForm.controls.endDate.valid" class="text-danger">
                End Date is required.
              </small>
            </span>
          </div>
        </div>
        <!--addresses-->
        <div formArrayName="programCategorys">
          <div *ngFor="let address of myForm.controls.programCategorys.controls; let i=index;trackBy: trackByFn" class="panel panel-default">
            <div [formGroupName]="i">
              <div class="container">
                <div class="row" *ngIf="i==0">
                  <span class="col-lg-3">
                    <label>Category Name</label>
                  </span>
                  <span class="col-lg-2">
                    <label>Max Points</label>
                  </span>
                  <span class="col-lg-2">
                    <label>Max Score</label>
                  </span>




                  <span class="col-lg-5" *ngIf="myForm.controls.programCategorys.controls.length === i"  >
                      <a (click)="addAddress()" style="cursor: default">
                           +Add{{i}}
                        </a>
                    </span>



                    <span class="col-lg-5" *ngIf="myForm.controls.programCategorys.controls.length < i" (click)="removeAddress(i)">D{{i}}L</span>


                </div>
                <div class="row">
                  <span class="col-lg-4">
                    <input type="text" class="form-control" formControlName="categoryName">
                    <small [hidden]="myForm.controls.programCategorys.controls[i].controls.categoryName.valid" class="text-danger">
                      CategoryName is required
                    </small>
                  </span>
                  <span class="col-lg-3">
                      <input type="text" class="form-control" formControlName="maxPoints">
                      <small [hidden]="myForm.controls.programCategorys.controls[i].controls.maxPoints.valid" class="text-danger">
                        Max Points is required
                      </small>
                    </span>
                    <span class="col-lg-3">
                        <input type="text" class="form-control" formControlName="maxScore">
                        <small [hidden]="myForm.controls.programCategorys.controls[i].controls.maxScore.valid" class="text-danger">
                          Max Score is required
                        </small>
                      </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="margin-20">

        </div>

        <div class="margin-20">
          <button type="submit" class="btn btn-primary pull-right" [disabled]="!myForm.valid">Submit</button>
        </div>
        <div class="clearfix"></div>

        <div class="margin-20">
          <div>myForm details:-</div>
          <pre>Is myForm valid?: <br>{{myForm.valid | json}}</pre>
          <pre>form value: <br>{{myForm.value | json}}</pre>
        </div>
      </form>
    </div>
  </div>
</div>

*。component.ts

import { Component, OnInit } from '@angular/core';
import { ProgramcreatorService } from './programcreator.service';
import { FormGroup, FormControl, Validators, FormBuilder, FormArray } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms'


@Component({
  selector: 'app-programcreator',
  templateUrl: './programcreator.component.html',
  styleUrls: ['./programcreator.component.scss']
})
export class ProgramcreatorComponent implements OnInit {

  public myForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
      this.myForm = this._fb.group({
        programName: ['', [Validators.required, Validators.minLength(5)]],
        startDate: ['', [Validators.required, Validators.minLength(5)]],
        endDate: ['', [Validators.required, Validators.minLength(5)]],
        programCategorys: this._fb.array([
              this.initAddress(),
          ])
      });
  }

  initAddress() {
      return this._fb.group({
        categoryName: ['', Validators.required],
        maxPoints:['', Validators.required],
        maxScore:['', Validators.required]

      });
  }

  addAddress() {
      const control = <FormArray>this.myForm.controls['programCategorys'];
      control.push(this.initAddress());
  }

  removeAddress(i: number) {
      const control = <FormArray>this.myForm.controls['programCategorys'];
      control.removeAt(i);
  }

  save(model: Customer) {
      // call API to save
      // ...
      console.log(model);
  }








}


export interface Customer {
    programName: string;
    startDate: Date;
    endDate: Date;
  addresses: Address[];
}

export interface Address {
  street: string;
  postcode: string;
}

Answer 1

您的两个条件完全错误：

myForm.controls.programCategorys.controls.length === i

仅当从i到0的索引length - 1等于长度时，这才是正确的。因此，它总是错误的。

myForm.controls.programCategorys.controls.length < i

仅当从i到0的索引length - 1大于长度时，这才是正确的。因此，它总是错误的。

第一个条件应该是i === 0 && myForm.controls.programCategorys.controls.length > 1，以检查i是第一行的索引，并且有多于一行。

第二个条件应为i === myForm.controls.programCategorys.controls.length - 1 && myForm.controls.programCategorys.controls.length > 1，以检查i是最后一行的索引，并且有多于一行。

Answer 2

看起来不错...尽管

<div class="row" *ngIf="i==0">

那么只有在数组中没有值时才会显示标题吗？

ngIf无法在Angular 6中按预期方式工作

2 个答案: