материал дизайн textField в угловых 6

Question

Я хочу использовать два дизайна материала textField в одной форме.Но когда я запускаю проект, работает только одна, плавающая метка не работает для поля пароля.

   <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: import {MDCTextField} from '@ material / textfield';var textField = new MDCTextField (document.querySelector ('. mdc-text-field'));

введите описание изображения здесь

Answer 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