CODEWITHSUNDEEP
angularangular-material
RohithS98
RohithS98

Reputation: 510

Only First mat-form-field is Displayed Initially

I'm trying to make a simple page for people to enter the form data which uses materials module in angular. When trying to display multiple mat-form-fields, only the first one is displayed initially. Only when I click on one of the form field are the other ones displayed.

File Layout:

-app
  |
  |-contactus(folder)
  |-app.component.html
  |-app.component.ts
  |-material.module.ts
  |-app.module.ts

contactus.html:

<div class="back">
    <div class="title" style="margin: auto">
       <mat-card>
          <h2> CONTACT US IS UNDER CONSTRUCTION </h2>
       </mat-card>
    </div>
<form>
<mat-form-field>
    <textarea matInput placeholder="Details"></textarea>
</mat-form-field>
<mat-form-field>
    <textarea matInput placeholder="Other"></textarea>
</mat-form-field>
</form>
</div>

contactus.ts:

import { Component, OnInit, NgModule } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-contactus',
  templateUrl: './contactus.component.html',
  styleUrls: ['./contactus.component.css']
})
export class ContactusComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { ContactusComponent } from './contactus/contactus.component';
import { AppRoutingModule } from './app-routing.module';


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

material.module.ts

import { NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {
    MatButtonModule,
    MatToolbarModule,
    MatCardModule,
    MatButtonToggleModule,
    MatInputModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatCardModule,
        MatToolbarModule,
        MatButtonToggleModule,
        MatInputModule
    ],
    exports: [
        MatButtonModule,
        MatCardModule,
        MatToolbarModule,
        MatButtonToggleModule,
        MatInputModule
    ],
})

export class MaterialModule { }

Why is it not displaying the other form-fields initially?

Upvotes: 1

Views: 545

Answers (1)

Dondi Imperial
Dondi Imperial

Reputation: 526

This happened to me just now and the fix was to import BrowserAnimationsModule into app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
...
@NgModule({
...
imports: [
BrowserAnimationsModule,...
]
...

Upvotes: 1

Related Questions