プレースホルダの位置 - 角材mdInput

Question

私のウェブサイトにはフォームを作成しようとしています。 入力とそのプレースホルダでエラー/問題/問題が発生しました。

実装が簡単で、それはthisのように見えます。プレースホルダは入力フィールドの下にあり、その内部にはありません。また、テキスト入力時に入力フィールドの上部でアニメーション化されません。

<md-form-field> 

    <input mdInput [formControl]="messageForm.controls['email']"> 
    <md-placeholder>E-mail</md-placeholder> 

</md-form-field> 

私はMD-入力-コンテナでそれをラップすることを試みたが、それは何も変更しませんでした。それでも同じように動作します。

私は通常のインプットも持っていて、そのプレースホルダーは入力欄の内側にあります。

いくつかのコードサンプル、他の何かが必要な場合 - あなたはドリル...

コンポーネントを知っている：私も使用しています

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { MaterialModule } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppRoutingModule } from './app.routing'; 
import { AppComponent } from './app.component'; 
import { ContactUsComponent } from './components/contact-us.component/contact-us.component'; 
import { HeaderComponent } from './components/header.component/header.component'; 
import { FooterComponent } from './components/footer.component/footer.component'; 
import { HomeComponent } from './components/home.component/home.component'; 
import { AboutComponent } from './components/about.component/about.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    HomeComponent, 
    AboutComponent, 
    ContactUsComponent, 
    FooterComponent 
    ], 
    imports: [ 
    BrowserModule, 
    BrowserAnimationsModule, 
    FormsModule, 
    ReactiveFormsModule, 
    HttpModule, 
    MaterialModule, 
    AppRoutingModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

：

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; 

@Component({ 
    selector: 'contact-us', 
    templateUrl: './contact-us.component.html', 
    styleUrls: ['./contact-us.component.scss'] 
}) 
export class ContactUsComponent { 

    messageForm : FormGroup; 

    constructor(formBuilder: FormBuilder) { 

    this.messageForm = formBuilder.group({ 
     'firstname' : [null, Validators.required], 
     'lastname': [null, Validators.required], 
     'email' :  [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.pattern(EMAIL_REGEX)])], 
     'message' : [null, Validators.required] 
    }) 
    } 

    sendMessage() { 
    console.log(""); 
    } 
} 

app.module.tsを以下の依存関係：

"dependencies": { 
    "@angular/animations": "^4.3.6", 
    "@angular/cdk": "^2.0.0-beta.10", 
    "@angular/common": "^4.2.4", 
    "@angular/compiler": "^4.2.4", 
    "@angular/core": "^4.2.4", 
    "@angular/forms": "^4.2.4", 
    "@angular/http": "^4.2.4", 
    "@angular/material": "^2.0.0-beta.10", 
    "@angular/platform-browser": "^4.2.4", 
    "@angular/platform-browser-dynamic": "^4.2.4", 
    "@angular/router": "^4.2.4", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "ng2-popover": "0.0.14", 
    "rxjs": "^5.4.2", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.3.2", 
    "@angular/compiler-cli": "^4.2.4", 
    "@angular/language-service": "^4.2.4", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.1.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "node-sass": "^4.5.3", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.2.0", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 

Answer 1

は、inputタグにプレースホルダを指定して、それ自体

<input mdInput [formControl]="messageForm.controls['email']" placeholder="Email"> 

これは、それが判明したように、私は解決策を見つけたトリック

Answer 2

に行う必要があります。

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

テーマをプロジェクトに追加すると、それが機能しました。彼らはそれらをインポートすることが義務付けられていることをドキュメントで指定しておくべきです...それにもかかわらず、今は動作しています。

皆さん、ありがとうございます。