输入时占位符不会消失答案

【问题标题】：Placeholder will not disappear when typing输入时占位符不会消失
【发布时间】：2018-12-30 21:46:50
【问题描述】：

单击按钮时，应克隆类为emails 的元素。

HTML：

<form id="add-user">
  <div class="email-container">
    <div class="emails">
        <mat-form-field class="email full-width">
            <input matInput class="email-field" type="email" required placeholder="E-Mail">
        </mat-form-field>
    </div>
  </div>
    <i class="material-icons icon" id="addEmailField" (click)="clone()">add_box</i>
</form>

TS：

public clone(): void {
   const clone = document.querySelector('.emails').cloneNode(true); // clone the selector .emails
   document.querySelector('.email-container').appendChild(clone); // append it to .email-container
}

克隆部分有效，但问题是克隆元素的占位符。如果我在文本字段中输入内容，它不会消失。

这就是我在克隆元素中键入时的样子：

我做错了什么？ 运行并测试它here。

【问题讨论】：

看起来在第一个之后，您正在为每个相互重叠的输入克隆多个文本框。这可能是因为 document.querySelector('.emails').cloneNode(true); - 这将抓取所有 .emails，即使您有 2、3 或 4 个 - 并将它们全部克隆。
建议你使用数组和ngFor，而不是自己操作dom
我不知道材料，但它看起来不是一个普通的占位符。这是一个在焦点上移动的标签，所以我猜它的功能是在页面加载时启动的，所以你需要寻找一种方法来重新启动新字段上的材料功能。

标签： javascript typescript angular-material angular6

【解决方案1】：

cloneNode() 克隆 DOM - 它不克隆 Angular 对象。您必须以“Angular”方式克隆 Angular 组件。看到这个帖子：https://stackoverflow.com/a/41921531/9226213。

【讨论】：

谢谢你，这对我有帮助。我已经发布了一个答案，描述了我是如何解决它的。

【解决方案2】：

使用ng-template 创建模板可以解决这个问题。每当单击按钮时显示模板，并在页面加载时显示它ngOnInit()。

HTML：

<form id="add-user">
    <ng-template #email>
        <mat-form-field class="email full-width">
            <input matInput class="email-field" type="email" required placeholder="E-Mail">
        </mat-form-field>
    </ng-template>
    <div #furtherEmails></div>
</form>
<i class="material-icons icon" id="addEmailField" (click)="clone()">add_box</i>

TS：

@ViewChild('email') email;
@ViewChild('furtherEmails', {read: ViewContainerRef}) furtherEmails;

public clone(): void {
    this.furtherEmails.createEmbeddedView(this.email);
}

ngOnInit() {
    this.clone();
}

【讨论】：

【解决方案3】：

您是否在您的 styles.css 中导入了材质主题？

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

【讨论】：

【解决方案4】：

您可以将输入绑定到 ts 文件中的变量，然后创建一个 mat 占位符，并将输入字段的 ngModelChange 属性绑定到将禁用或启用 mat 占位符的函数。取决于输入字段是否为空。

HTML：

<mat-form-field class="email full-width">
        <mat-placeholder *ngIf="showPlaceholder">E-mail</mat-placeholder>
        <input matInput class="email-field" type="email" [(ngModel)]="email" (ngModelChange)="togglePlacholder()" required />
</mat-form-field>

TS：

email: string = ''
showPlaceholder: boolean = true

togglePlaceholder() {
    if(this.email !== '') { 
        this.showPlaceholder = false
    }else {
        this.showPlaceholder = true
    }
}

【讨论】：