输入时占位符不会消失

Question

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

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.

Answer 1

cloneNode() 克隆 DOM - 它不会克隆 Angular 对象。您必须以 "Angular" 方式克隆 Angular 组件。看到这个 post：.

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

Answer 3

您是否在 styles.css 中导入了 material 主题？

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

Answer 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
    }
}

输入时占位符不会消失

Placeholder will not disappear when typing

javascript

typescript

angular-material

angular6