角度6的材料设计文本字段答案

【问题标题】：material design textField in angular 6角度6的材料设计文本字段
【发布时间】：2018-09-30 07:01:56
【问题描述】：

我想在一个表单中使用两个材料设计文本字段。但是当我运行项目时，只有一个工作，标签的浮动对密码字段不起作用。

   <div class="col-md-12" style="padding: 0">
                     <div class="mdc-text-field mdc-text-field--outlined customInputWidth">
                       <input type="text" id="tf-outlined3" class="mdc-text-field__input">
                       <label for="tf-outlined3" class="mdc-floating-label">User Name</label>
                       <div class="mdc-notched-outline">
                         <svg>
                           <path class="mdc-notched-outline__path"/>
                         </svg>
                       </div>
                       <div class="mdc-notched-outline__idle"></div>
                     </div>
                </div>

                <div class="col-md-12" style="padding: 0;margin-top: 10px">
                  <div class="mdc-text-field mdc-text-field--outlined customInputWidth">
                    <input type="text" id="tf-outlined4" class="mdc-text-field__input">
                    <label for="tf-outlined4" class="mdc-floating-label">Password </label>
                    <div class="mdc-notched-outline">
                      <svg>
                        <path class="mdc-notched-outline__path"/>
                      </svg>
                    </div>
                    <div class="mdc-notched-outline__idle"></div>
                  </div>
                </div>

ts: 从“@material/textfield”导入 {MDCTextField}； var textField = new MDCTextField(document.querySelector('.mdc-text-field'));

enter image description here

【问题讨论】：

请 Zeinab 发布您的代码。
@fatemefazli 这是我的 html 代码。
@FatemeFazli 嗨，我有一个关于 jquery 滚动的问题。你能帮帮我吗？
嗨 Zeinab，对不起，我不太擅长 jquery。
@FatemeFazli 谢谢。我需要滚动滚动，但我找不到

标签： angular material-design

【解决方案1】：

你可以试试这个方法：

ts：

import { MdcTextField, MdcIcon } from '@angular-mdc/web';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(
    private _renderer: Renderer2) {}
}

html:

<div class="demo-content">
    <h3 class="demo-content__headline">Outlined Text Field</h3>
    <div class="demo-layout__row">
        <button mdc-button (click)="outlined.disabled = !outlined.disabled">Disabled: {{outlined.disabled ? 'On' : 'Off'}}</button>
        <button mdc-button (click)="outlined.required = !outlined.required">Required: {{outlined.required ? 'On' : 'Off'}}</button>
        <button mdc-button (click)="outlined.dense = !outlined.dense">Dense: {{outlined.dense ? 'On' : 'Off'}}</button>
        <button mdc-button (click)="alternateColors(outlined)">Alternate Colors</button>
    </div>
    <mdc-text-field #outlined outlined label="Your name"></mdc-text-field>
  <br>
  <mdc-text-field #outlined outlined label="Password"></mdc-text-field>
</div>

DEMO

【讨论】：