У меня есть вопрос, который должен быть легким, но я чего-то упускаю.
Вот мой stackbiltz: https://stackblitz.com/edit/angular-j7j3jk
Что я пытаюсь сделать используется тот div, который появляется под "LAST NAME" в примере, чтобы отображаться под любым полем. Я хочу, чтобы SLIDER создавал впечатление, что это отдельный div для каждого поля ввода, но на самом деле это полиморфный c. Щелкните восклицательный знак, чтобы отобразить скрытый div (слайдер). Не обращайте внимания на КНОПКУ ОТКРЫТЬ МОДАЛЬНУЮ, так как это обычное 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"> <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"> <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>
<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">×</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>
<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.
Спасибо