Question

我正在使用角度4。

我正在尝试向表单添加动态元素。

这是我的代码。

首先，我使用formbuilder创建一个表单。

 this.addbookingForm = this.fb.group({
      FROM: ['', Validators.required],
      branch: [''],
      TO:['', Validators.required],
      FROM_NAME: ['', Validators.required],
      FROM_MOBILE: ['', Validators.compose([Validators.minLength(9)])],
      TO_NAME: ['', Validators.required],
      TO_MOBILE: ['', Validators.compose([Validators.minLength(9)])],
      PAY_TYPE: ['', Validators.required],
      LLR:[''],
      MANUAL_LLR: ['', Validators.required],
      BRANCH_LLR:'',
      DELIVERY_TYPE: ['', Validators.required],
      VIA: ['', Validators.required],
      ST: [true],
      CROSSING: [0],
      ITEMS: this.fb.array([this.initItems()]),
      TOTAL_AMOUNT: [''],
      BOOKING_DATE: [this.currentDate],
      STATUS: ['Booked'],
      FROM_NAME_LABEL : ['']
})

 initItems() {        
    const group = this.fb.group({           
          NAME: [''],
          NO_OF_ITEMS: ['',Validators.required],
          PRICE: [''],
          WEIGHT: [''],
          TOTAL: ['']                     
    });
    return group;
}

这是我的HTML代码。

<div formArrayName="ITEMS" class="form-group row">
  <div class="col-sm-12" *ngFor="let item of ITEMS.controls; let in=index; let l=last;">                     
    <div class="row" [formGroupName]="in">
        <div class="form-group col-sm-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" formControlName="NAME" tabindex="1"  #input>
        </div>
        <div class="form-group col-sm-2">
            <label class="form-label">No of Items</label>
            <input type="text" pattern="^[0-9]*$" class="form-control" tabindex="2" formControlName="NO_OF_ITEMS" (change)="onChange(ITEMS.controls[in].value.NO_OF_ITEMS, in)">
        </div>
         <div class="form-group col-sm-2">
            <label class="form-label">Price per Item</label>
            <input type="text" pattern="^[0-9]*$" class="form-control" formControlName="PRICE" tabindex="3" (change)="changePrice(ITEMS.controls[in].value.PRICE,in)">
        </div>
         <div class="form-group col-sm-2">
            <label class="form-label">Weight</label>
            <input type="text" class="form-control" formControlName="WEIGHT" tabindex="4">
        </div>
        <div class="form-group col-sm-2">
            <label class="form-label">Total</label>
            <input type="number" pattern="^[0-9]*$" readonly="true" class="form-control" formControlName="TOTAL" >
        </div>
        <div class="form-group col-sm-1" >                                
            <span class="remove-todo ion-ios-close-empty" *ngIf="addbookingForm.controls.ITEMS.controls.length > 1" (click)="removeItems(in, ITEMS.controls[in].value.NO_OF_ITEMS)"><i class="fa fa-minus" aria-hidden="true"></i></span>
            <a (click)="addItems()"  *ngIf="l && show" style="cursor: default" tabindex="5">
            <i class="fa fa-plus" aria-hidden="true"></i></a>                                                            
        </div>
    </div>
  </diV>

这是addItems（）。

my addItems() {
        const control = <FormArray>this.addbookingForm.controls['ITEMS'];        
        control.push(this.initItems());

  }

每个输入标签设置标签index.First time tabIndex工作正常。当我点击addItems()。它添加动态输入元素来形成。

但tabindex工作不正常。

当我动态添加元素时，我需要动态地使用tabIndex。

请告诉我，感谢

使用tabindex添加动态元素的角度4

0 个答案: