输入框支持大量复制自动填充

需求:可以添加多条数据的时候为了可以不需要一条一条输入,需要怎加复制数据后自动填充到输入框内,上图:

 点击小铅笔切换;

同时左边输入备注后,在右边同样展示数据

HTML:基本的样式结构和数据绑定

<nz-form-control [nzSpan]="17" style="position: relative;">
                <div *ngIf="!iconrated" style="float: left;width: 92%;">
                  <nz-input-group  style="width: 100%;" *ngFor="let param of formOthers.params;let i = index">
                    <input type="text" placeholder="key" nz-input [ngModelOptions]="{standalone: true}"
                    [(ngModel)]="param.key" style="width: 30%;" />
                  <input type="text" placeholder="value" nz-input [ngModelOptions]="{standalone: true}"
                    [(ngModel)]="param.value" style="width:30%;" />
                  <input type="text" placeholder="请输入备注" nz-input [ngModelOptions]="{standalone: true}"
                    [(ngModel)]="param.comment" style="width:40%;" />
                    <i *ngIf="i!==0" nz-icon nzType="delete" nzTheme="outline" (click)="deleteData('params',i)"
                    class="plus-tip"></i>
                  <i *ngIf="i===0" nz-icon nzType="plus" nzTheme="outline" class="plus-tip"
                    (click)="addData('params')"></i>
                  </nz-input-group>
                </div>
                <nz-input-group nzCompact *ngIf="iconrated"  style="float: left;width: 92%;">
                  <textarea  [(ngModel)]="textarea" [ngModelOptions]="{standalone: true}" nz-input nzAutosize></textarea>
                </nz-input-group>
                <i *ngIf="!iconrated" nz-icon nzType="edit" nzTheme="outline" class="plus-edit" (click)="ratedinput('params')"></i>
                <i *ngIf="iconrated" nz-icon nzType="menu" nzTheme="outline" class="plus-edit" (click)="onceinput('params')"></i>
              </nz-form-control>

 Ts:大量转填充

 ratedinput(){
      this.iconrated = true
      var arr="";
      this.formOthers.params.forEach(item => {
        var index = 0
        console.log(item);

        for(var i in item){   
          if(index==0){
            if(item[i] === null||item[i] === ""){
              var temp = ""
            }else{
            var temp = item[i]+":"
            }
          }else if(index === 1){
            if(item[i] === null||item[i] === ""){
              var temp = ""
            }else{
              var temp = item[i]+"||"
            }
          }else{
            if(item[i] === null||item[i] === ""){
              var temp = "\n"
            }else{
              var temp = item[i]+"\n"
            }
          }
          arr = arr+temp
          index++;
      }
      });
      if(arr.substring(0, arr.length - 1) === ":||"){
        this.textarea = ""
      }else{
        this.textarea = arr.substring(0, arr.length - 1);
      } 
    }

 填充转大量

 onceinput(type){
      console.log("点击text");
      
      this.iconrated = false
      const gude =  this.textarea +'\n'
      const guide = gude.split("\n")
      guide.pop()
      const guideList  = []
      guide.forEach((item,index) => { 
        var key = item.split(":")[0];
        var value = item.replace(key,"").replace(":","")
        if(item.indexOf("||") !== -1){
          var comment = item.substring(item.indexOf("||")+2,item.length)
        }else{
          var comment = ""
        }
        var value = item.replace(key,"").replace(":","").replace(comment,"").replace("||","")
        const obj ={
          key,value,comment
        }
        guideList.push(obj)
      })
        this.formOthers.params = guideList
        // this.formOthers.params =[{
        //   key: null,
        //   value: null,
        //   comment: null,
        // }]
        console.log(this.formOthers.params);
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值