CODEWITHSUNDEEP
angularangular-material
Razvan Zamfir
Razvan Zamfir

Reputation: 4616

Why are my Angular Material form elements not displayed in the view?

I am working on a small Recipes application in Angular 9.

In src/app/recipe-form/recipe-form.component.ts I have

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {MatSelect} from "@angular/material/select";

@Component({
  selector: 'recipe-form',
  templateUrl: './recipe-form.component.html',
  styleUrls: ['./recipe-form.component.scss']
})
export class RecipeFormComponent implements OnInit {

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit(): void {
  }

}

In recipe-form.component.html I have:

<form #form="ngForm" autocomplete="off">
  <mat-form-field class="example-full-width">
      <mat-label>Name</mat-label>
      <input matInput name="name" value="">
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <mat-label>Description</mat-label>
      <input matInput name="description" value="">
    </mat-form-field>

    <mat-form-field>
        <mat-label>Matching Drink</mat-label>
        <mat-select>
           <mat-option *ngFor="let drink of drink" [value]="drink.value">{{drink.viewValue}}
                </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field class="example-full-width">
      <mat-label>Recipe</mat-label>
      <textarea name="full_description"></textarea>
    </mat-form-field>
    <div>
         <button type="submit" [disabled]="form.invalid" class="btn btn-lg btn-block">SUBMIT</button>
    </div>

    <button mat-button type="submit" [disabled]="form.invalid" class="btn btn-lg btn-block">SUBMIT</button>
</form>

For some reason I was unable to figure out the only form elements displayed in the view are the textarea and the submit button.

What is missing?

UPDATE:

The text fields (input type="text") are visible now but there is no underline, despite using appearance="outline":

<mat-form-field appearance="outline">
    <mat-label>Description</mat-label>
    <input matInput type="text" placeholder="Description" required>
</mat-form-field>

Also there is this error in the console: Error: mat-form-field must contain a MatFormFieldControl.

Upvotes: 0

Views: 7391

Answers (1)

kuldeep
kuldeep

Reputation: 865

You should have imported your material module inside your recipe module. if however recipe component is declared within appModule then you have to import mat module there !!

Also please check for FormsModule, as you are using mat-form-field. Your appmodule should import it before you import material module.

e.g 

   @NgModule({
  declarations: [
    AppComponent,
    RecipeFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and material module something like this

import { NgModule } from "@angular/core";
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    declarations: [],
    imports: [
        MatCardModule,
        MatButtonModule,
        MatToolbarModule,
        MatGridListModule,
        MatIconModule,
        DragDropModule
    ],
    exports: [
        MatCardModule,
        MatButtonModule,
        MatToolbarModule,
        MatGridListModule,
        MatIconModule,
        DragDropModule
    ],
    providers: []
}
)
export class MaterialModule {

}

Update:

based on your error your mat input field should contain matInput directive. For more information have a look here at sample and documentation

 <mat-form-field class="example-full-width">
    <mat-label>Favorite food</mat-label>
    <input matInput placeholder="Ex. Pizza" value="Sushi">
  </mat-form-field>

Upvotes: 2

Related Questions