form.component.html

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input required formControlName="name" class="form-control" placeholder="Charmander" type="text" matInput />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Type</mat-label>
    <input required formControlName="type" class="form-control" placeholder="Fire" type="text" matInput />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Height</mat-label>
    <input matInput required formControlName="height" class="form-control" placeholder="0.5" type="number" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Weight</mat-label>
    <input matInput required formControlName="weight" class="form-control" placeholder="9.5" type="number" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Description</mat-label>
    <input matInput required formControlName="description" class="form-control" placeholder="Description" type="text" />
  </mat-form-field>
  <mat-form-field>
    <mat-label>Image URL</mat-label>
    <input matInput required formControlName="imgUrl" class="form-control" placeholder="https://charmander.png" type="text" />
  </mat-form-field>
  <button type="button" mat-raised-button (click)="submit()" color="primary" [disabled]="!form.valid">
    Submit
  </button>
</form>