Angular mat-form-field how to set width:100%

Issue

I create a registration form as part of my learning Angular and Nodejs. My form looks wide and it is ok, however the fields on this form looks narrow or thin. I tried to set Width:100% direct to the container tag but didn't work.

How to set width:100% for all these fields using a css tag?

My form using angular:

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h4>Register New User</h4>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="register-container">
    <form>
      <mat-form-field>
        <input matInput placeholder="E-mail" ng-model="data.email" type="email">
      </mat-form-field>
      <br />
      <mat-form-field>
        <input matInput placeholder="Password" ng-model="data.pwd" type="password">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Name" ng-model="data.name" type="text">
      </mat-form-field>
      <br>
      <mat-form-field>
        <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>

Solution

This works just fine.

mat-form-field {
  width: 100%;
}

Live demo

Answered By - Tomasz Kula