Элементы управления материальной формой, невидимые в приложении Angular

включить @import "~@angular/material/prebuilt-themes/indigo-pink.css"; в style.scss

Сама тема работает, но есть несколько хороших дополнений:

добавить 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();
  }

}