Angular App 中不可见的材质表单控件

Question

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

这里是一些屏幕：

主屏幕：

点击元素：

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

所有文件都在这个 git repo 上可用：

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();
  }

}