Material Form Controls invisible in Angular App

Question

I just started learning Angular 6 and i'm trying to implement a simple form as a test. My problem is : The form controls are invisible, we can't see them, but if i click on the right spot, i can see the elements.

Here are some screens :

Main Screen :

Elements on click :

The code is nothing fancy, i have a component FormTestComponent, and i created a Module ( MaterialModule ) which contains all Material modules needed that i need. I have no errors in the console.

All the files are available on this git repo :

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

Am i missing something?

Answer 1

include @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in style.scss

The theme alone works but these are some nice additions :

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

}