Question

我正在尝试为我的网站创建表单。我的输入及其占位符出现了错误/问题/问题。

它应该很容易实现，看起来像this。占位符位于输入字段下，而不是＆＃34;内部＆＃34;它，当输入文本时，它也不在输入字段的上半部分动画。

<md-form-field>

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

</md-form-field>

我试图将它包装在 md-input-container 中，但它没有改变任何东西。它的行为方式仍然相同。

我也有定期输入，而且他们的占位符位于正确的位置 - 输入字段内。

一些代码示例，如果需要其他任何东西 - 你知道演习...

组件：

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：

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

我也在使用以下依赖项：

  "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 mdInput [formControl]="messageForm.controls['email']" placeholder="Email">

这应该可以解决问题

Answer 2

事实证明，我找到了解决方案。

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

将主题添加到项目中使其正常工作。他们应该在文档中指出必须导入那些......但是，现在它正在工作。

感谢大家的帮助

占位符位置 - 角度材质mdInput

2 个答案: