'mat-form-field is invisible

I am very new in angular and I tried to write project that have two input field. and I have a problem that I cant see those field on the website but they are clickable and I can write text in them. it happend to me after I added mat-error to those two field. Someone know what is my problem.

this is my app.component.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yooz application</title>
  <link rel="stylesheet" href="app.component.css">
</head>
<body>
  <!-- website title -->
  <h1 class="title">
    Welcome to my Website
  </h1>
  <form [formGroup]="form">
    <mat-form-field class="emailFormField">
      <mat-label>Email</mat-label>
      <input matInput formControlName="email" type="text" name="none">
      <mat-error *ngIf="this.form.controls['email'].hasError('required')">
        It is required field
      </mat-error>
    </mat-form-field>
  </form>
  <form [formGroup]="form">
    <mat-form-field class="passwordFormField">
      <mat-label>Password</mat-label>
      <input matInput formControlName="password" type="text" name="none">
      <mat-error *ngIf="this.form.controls['password'].hasError('required')">
        It is required field
      </mat-error>
    </mat-form-field>
  </form>
</body>
</html>

this is my app.component.ts:

import { Component } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validator,
  Validators,
} from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'yoozProject';
  form: FormGroup;
  constructor (private fb: FormBuilder) {
    this.form = this.fb.group({
      name: new FormControl('', [Validators.required]),
      lastName: new FormControl('', [Validators.required]),
    });
  }
}

and this is my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent} from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatInputModule} from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
htmlcssangular


Solution 1:[1]

Your DevTools console will probably tell you exactly what is wrong. Open your Angular app, press F12 and check out the console tab.

I think the issue is a mismatch in your form. In the HTML your referencing to 'email' and 'password' while in the formbuilder you're using 'name' and 'lastName'.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Felix

Related Questions