Angular App hides the Material Form Controls

Question

Angular App hides the Material Form Controls

Recently, I delved into learning Angular 6 and decided to test my knowledge by creating a simple form. However, I encountered an issue: the form controls are not visible at first glance, but when clicked on the right spot, they appear.

Below are screenshots depicting the situation:

Main Screen :

https://i.sstatic.net/6epA0.png

Elements on click :

https://i.sstatic.net/RawoL.png

https://i.sstatic.net/dqYbD.png

The code structure is quite basic; I have a component called FormTestComponent and a Module (MaterialModule) that includes all the necessary Material modules. Surprisingly, there are no errors showing up in the console.

You can access all the files from this git repository:

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

I am left wondering if I overlooked something crucial?

angular typescript angular-material material-design angular6

Answer 1

Answer №1

To include the theme in your project, simply add the following line to your style.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

While the theme works well on its own, you can enhance it further by adding the following modules:

Add FormsModule and ReactiveFormsModule to your AppModule:

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

Answer 2

To include the theme in your project, simply add the following line to your style.scss file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

While the theme works well on its own, you can enhance it further by adding the following modules:

Add FormsModule and ReactiveFormsModule to your AppModule:

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

Angular App hides the Material Form Controls

Answer №1

Similar questions

Looking for a way to dynamically append a child element within another child

A TypeScript function that converts a value into an array if it is not already an array, ensuring the correct type is output

Step-by-step guide for sending information to a personalized API using Ajax on the Syncfusion Angular Scheduler

Issue with Angular / SCSS where animation is not being executed on the specified element

Solidjs: Implementing a Map in createStore does not trigger updates upon changes

How to delete all markers on a Google map in Angular 6

Secure Your Angular Application on Heroku with Best Security Practices

The template fails to reflect the changes in Signal's value

Return a potential undefined output

Is it possible that React.createElement does not accept objects as valid react children?

Updating our project from Angular version 17 to version 18

What distinguishes between the methods of detecting falsy and truthy values?

The console is displaying 'undefined' when attempting to render the JSON response in Vue

What could be causing the excessive number of connections in my MongoDB instance?

Is it possible to minimize the number of accessors needed for reactive forms?

What is the most recent stable version of Angular recommended for utilizing ui-bootstrap?

Creating a customizable filter by using the function of an object

Configuring the parameters property for a SSM Association in AWS CDK

What is the relationship between directives, templates, and ViewContainers in Angular?

Navigate through collections of objects containing sub-collections of more objects