角材质浮动标签不浮动答案

【问题标题】：Angular Material Float Label Isn't floating角材质浮动标签不浮动
【发布时间】：2018-02-07 00:16:11
【问题描述】：

我有一个angular form 这个form 是两个angular material inputs

文档中有一个属性指出您可以使标签始终浮动，因此我尝试复制它，但无论出于何种原因它都不起作用。

这里是 HTML

<form *ngIf="frmNotes" [formGroup]="frmNotes">
                <mat-form-field [floatLabel]="always" style="width: 100%">
                    <input matInput placeholder="Subject" formControlName="subject" [(ngModel)]="note.subject">
                </mat-form-field>
                <mat-form-field [floatLabel]="always" style="width: 100%;">
                    <textarea formControlName="note" matInput placeholder="Write a note.." [(ngModel)]="note.value"></textarea>
                </mat-form-field>
            </form>

这里是 TS

import { Component } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ProfileService } from "../../services/profile-service";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: 'note-component',
    templateUrl: 'note.component.html',
    styleUrls: ['./note.component.css']
})

export class NoteComponent {
    notes: any;
    frmNotes: FormGroup;
    note: LooseObject = {};

    constructor(private route: ActivatedRoute, private profileService: ProfileService, private formBuilder: FormBuilder) {
      this.frmNotes = formBuilder.group({});
    }

    ngOnInit() {
        this.route.params.subscribe(res => {
            this.profileService.getNotes(res.id).subscribe(data => {
                this.notes = data.notes;
            }, err => console.error(err));

        });
        this.frmNotes = this.formBuilder.group({
            note: ['', Validators.required],
            subject: ['', Validators.required]
        });
    }

}

这是它的外观图片：

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

方括号表示模板表达式 - [floatLabel]="always" 将在您的组件中查找名为 always 的变量，基本上等同于 floatLabel="{{always}}"。您需要将 always 括在单引号中，或者如果您想直接传递它，请删除方括号：[floatLabel]="'always'" 或 floatLabel="always"。

【讨论】：