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

最新推荐文章于 2023-05-30 10:19:15 发布

Hinngk野

最新推荐文章于 2023-05-30 10:19:15 发布

阅读量444

点赞数 1

分类专栏： angular 文章标签： html javascript angular

本文链接：https://blog.csdn.net/weixin_47898697/article/details/120412441

版权

angular 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

点击小铅笔切换；

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

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);
    }