如何使用一个 div 出现在多个表单字段下，使其看起来每个字段都有一个 div

Question

我有一个应该很简单的问题，但我遗漏了一些东西。

这是我的 stackbiltz：https://stackblitz.com/edit/angular-j7j3jk

我想做的是使用示例中出现在 "LAST NAME" 下的 div 出现在任何字段下。我希望 SLIDER 看起来像每个输入字段都是一个单独的 div，但它实际上是多态的。单击感叹号以显示隐藏的 div（滑块）。忽略 OPEN MODAL BUTTON，因为它只是一个普通的 bootstrap 模态。

这是我的 HTML

    <div class="container">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard='false'>
        Open modal
      </button>
      <br><br>
      <div id="inputcontainer">
        <input id="inlinetext" placeholder="Enter First Name" name="inlinetext" maxlength="20" [(ngModel)]="firstname">
        <a href="javascript:;" (click)="trigger();"
          title="click to write a review">&nbsp;&nbsp;<span class="info">!</span></a>
      </div>
      <br>
      <div id="inputlastcontainer">
        <input id="inlinelasttext" placeholder="Enter Last Name" name="inlinelasttext" maxlength="20" [(ngModel)]="lastname">
        <a href="javascript:;" (click)="trigger();"
          title="click to write a review">&nbsp;&nbsp;<span class="info">!</span></a>
      </div>

      <div id="slider" class="slide-up">
        <div class="contentcontainer">
          <div class="contents">
            <p>Flag field for review</p>
            <input id="reviewText" maxlength="25" class="inputfield" [(ngModel)]="inlinetext" placeholder="Enter a review">
            <button id="btnCancelInline" type='button' data-dismiss="modal" (click)="cancelClose('inline');">Cancel</button>
            &nbsp;
            <button id="btnSaveInline" type='button' data-dismiss="modal"(click)="saveComment('inline');">Comment</button>
          </div>
        </div>
      </div>

      <!-- The Modal -->
      <div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title">Flag field for review</h4><br>
              <p>Leave a comment for other collaborators.</p>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
              <input placeholder="Enter a review comment" name="textfield" id="textfield" maxlength="20" [(ngModel)]="textname">
            </div>

              <div class="modal-footer">
                <button id="btnCancel" type='button' data-dismiss="modal" (click)="cancelClose('modal');">Cancel</button>
                &nbsp;
                <button id="btnSave" type='button' data-dismiss="modal"(click)="saveComment('modal');">Comment</button>
              </div>

            </div>
          </div>
        </div>
      </div>

这是app.component.ts

    import { Component, OnInit, ViewChild } from "@angular/core";
    import { FormBuilder, FormGroup, Validators } from "@angular/forms";

    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent implements OnInit {
      textname: string = "";
      inlinetext: string = "";
      inlinelasttext: string = "";
      slider: HTMLElement;

      public ngOnInit() {}

      public ngAfterViewInit() {
        this.slider = document.querySelector("#slider") as HTMLElement;
      }

      public open() {
        if ("Some condition") {
          // Dont open the modal
        } else {
          // Open the modal
        }
      }

      public cancelClose(wherefrom): void {
        if (wherefrom === "modal") {
          this.textname = "";
        }
        if (wherefrom === "inline") {
          this.inlinetext = "";
          this.trigger();
        }
      }

      public saveComment(wherefrom): void {
        if (wherefrom === "inline") {
          alert("This is the value you saved INLINE: " + this.inlinetext);
          this.inlinetext = "";
          this.trigger();
        }

        if (wherefrom === "modal") {
          alert("This is the value you saved MODAL: " + this.textname);
          this.textname = "";
        }
      }

      public trigger(): void {
        this.slider.classList.toggle("slide-down");
      }
    }

这是CSS

    .container{
      padding:20px;
    }
    .info {
      font-weight: bolder;
    }

    .contents {
        background: lightgrey;
        color: rgba(0, 0, 0, .8);
        padding: 19px;
        margin: 0;
        border: 1px darkgrey solid;
        width: 230px;
        height: 120px;
    }
    .slide-up, .slide-down {
      overflow:hidden;
    }
    .slide-up > div, .slide-down > div {
      transform: translateY(-100%);
      transition: .4s ease-in-out;
    }
    .slide-down > div {            
      transform: translateY(0);
    } 

    .contentsborder {
      border: 1px 1px 1px 0px solid #000;
    }

    .inputfield {
      margin-bottom: 5px;
    }

    #btnSaveInline {
      float: right;
    }

    #btnCancelInline {
      margin-left: 45px;
    }

基本上，一个 DIV (SLIDER) 用于任意 'n' 个表单字段。

谢谢

Answer 1

这是执行此操作的正确方法。

首先是HTML:

  <div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >
      Open modal
    </button>
    <br><br>
    <div id="inputcontainer">
      <input id="inlinetext" placeholder="Enter First Name" name="inlinetext" maxlength="20" [(ngModel)]="firstname">
      <a href="javascript:;" (click)="trigger(); showSlide=!showSlide; firstNamePos=true; lastNamePos=false"
        title="click to write a review">&nbsp;&nbsp;<span class="info">!</span></a>
    </div>
    <br>
    <div id="inputlastcontainer">
      <input id="inlinelasttext" placeholder="Enter Last Name" name="inlinelasttext" maxlength="20" [(ngModel)]="lastname">
      <a href="javascript:;" (click)="trigger(); showSlide=!showSlide; lastNamePos=true; firstNamePos=false"
        title="click to write a review">&nbsp;&nbsp;<span class="info">!</span></a>
    </div>

    <div id="slider" class="slide-up" [ngClass]="{'show-slide': showSlide, 'first-name-pos': firstNamePos, 'last-name-pos': lastNamePos}">
      <div class="contentcontainer">
        <div class="contents">
          <p>Flag field for review</p>
          <input id="reviewText" maxlength="25" class="inputfield" [(ngModel)]="inlinetext" placeholder="Enter a review">
          <button id="btnCancelInline" type='button' data-dismiss="modal" (click)="cancelClose('inline');">Cancel</button>
          &nbsp;
          <button id="btnSaveInline" type='button' data-dismiss="modal"(click)="saveComment('inline');">Comment</button>
        </div>
      </div>
    </div>

    <!-- The Modal -->
    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Flag field for review</h4><br>
            <p>Leave a comment for other collaborators.</p>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            <input placeholder="Enter a review comment" name="textfield" id="textfield" maxlength="20" [(ngModel)]="textname">
          </div>

            <div class="modal-footer">
              <button id="btnCancel" type='button' data-dismiss="modal" (click)="cancelClose('modal');">Cancel</button>
              &nbsp;
              <button id="btnSave" type='button' data-dismiss="modal"(click)="saveComment('modal');">Comment</button>
            </div>

          </div>
        </div>
      </div>

    </div>

然后.ts代码

    import { Component, OnInit, ViewChild } from "@angular/core";
    import { FormBuilder, FormGroup, Validators } from "@angular/forms";

    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"]
    })
    export class AppComponent implements OnInit {
      textname: string = "";
      inlinetext: string = "";
      inlinelasttext: string = "";
      slider: HTMLElement;

      public ngOnInit() {}

      public ngAfterViewInit() {
        this.slider = document.querySelector("#slider") as HTMLElement;
      }

      public open() {
        if ("Some condition") {
          // Dont open the modal
        } else {
          // Open the modal
        }
      }

      public cancelClose(wherefrom): void {
        if (wherefrom === "modal") {
          this.textname = "";
        }
        if (wherefrom === "inline") {
          this.inlinetext = "";
          this.trigger();
        }
      }

      public saveComment(wherefrom): void {
        if (wherefrom === "inline") {
          alert("This is the value you saved INLINE: " + this.inlinetext);
          this.inlinetext = "";
          this.trigger();
        }

        if (wherefrom === "modal") {
          alert("This is the value you saved MODAL: " + this.textname);
          this.textname = "";
        }
      }

      public trigger(): void {
        this.slider.classList.toggle("slide-down");
      }
    }

然后.css

    .container{
      padding:20px;
    }
    .info {
      font-weight: bolder;
    }

    .contents {
        background: lightgrey;
        color: rgba(0, 0, 0, .8);
        padding: 19px;
        margin: 0;
        border: 1px darkgrey solid;
        width: 230px;
        height: 120px;
    }
    .slide-up, .slide-down {
      position: absolute;
      visibility: hidden;
      overflow:hidden;
    }
    .slide-up > div, .slide-down > div {
      transform: translateY(-100%);
      transition: .4s ease-in-out;
    }
    .slide-down > div {           
      transform: translateY(0);
    } 

    .contentsborder {
      border: 1px 1px 1px 0px solid #000;
    }

    .inputfield {
      margin-bottom: 5px;
    }

    #btnSaveInline {
      float: right;
    }

    #btnCancelInline {
      margin-left: 45px;
    }
    .first-name-pos {
      top: 100px;
    }
    .show-slide {
      visibility: visible;
    }
    .last-name-pos {
      top: 145px;
    }

最终结果是这样的：https://stackblitz.com/edit/angular-vmmxcc

如何使用一个 div 出现在多个表单字段下，使其看起来每个字段都有一个 div

How to use one div to appear under multiple form fields making it appear there is a div for each field

typescript

angular6