Material 表单控件在 Angular 应用程序中不可见

Question

我刚开始学习 Angular 6，我正在尝试实现一个简单的表单作为测试。我的问题是：表单控件是不可见的，我们看不到它们，但是如果我单击正确的位置，我可以看到元素。

以下是一些屏幕：

主屏幕：

点击元素：

代码没什么特别的，我有一个组件 FormTestComponent，我创建了一个模块 (MaterialModule)，其中包含我需要的所有 Material 模块。我在控制台中没有错误。

此 git 存储库中提供了所有文件：

https://github.com/Shyrro/NewTry/tree/master/ClientApp/src/app

我是不是漏掉了什么？

Answer 1

在 style.scss

中包含 @import "~@angular/material/prebuilt-themes/indigo-pink.css";

主题本身有效，但这些是一些不错的补充：

添加 FormsModule 和 ReactiveFormsModule :

import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  ...
  imports: [
            FormsModule,
            ReactiveFormsModule],
  ...
})
export class AppModule { }

HTML:

 <form [formGroup]="basicForm" class="example-form">
      <mat-form-field>
        <input matInput formControlName="test" placeholder="Just a test">
      </mat-form-field>
      <mat-form-field>
        <mat-select formControlName="select" placeholder="Select">
          <mat-option value="option">Option</mat-option>
        </mat-select>
      </mat-form-field>
    </form>

TS:

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

@Component({
  selector: 'app-form-test',
  templateUrl: './form-test.component.html',
  styleUrls: ['./form-test.component.scss']
})
export class FormTestComponent implements OnInit {
  basicForm: FormGroup;


  constructor(private fb: FormBuilder) { }

  createForm(){
   this.basicForm = this.fb.group({
      test: '',
      select: ''
   })
  }

  ngOnInit() {
    this.createForm();
  }

}

Material 表单控件在 Angular 应用程序中不可见

Material Form Controls invisible in Angular App

typescript

material-design

angular-material

angular

angular6