材料组件中的额外下划线（Angular2）

Question

我是Material Component的新手，从昨天起就遇到了问题。我正在使用输入文本提交设计注册表单，但每个字段都需要额外的下划线，我无法找到问题。

<form class="example-form" (ngSubmit)="onSignup(f)" #f="ngForm">
      <label class="registr">Registration Form</label>
        <table class="example-full-width" cellspacing="0"><tr>
          <td><mat-form-field class="example-full-width">
            <input matInput id="fname" name="fname" placeholder="First name">
          </mat-form-field></td>

          <td><mat-form-field class="example-full-width">
            <input matInput id="lname" name="lname" placeholder="Last Name">
          </mat-form-field></td>
          </tr></table>

          <table class="example-full-width" cellspacing="0"><tr>
          <td><mat-form-field class="example-full-width">
              <input type="email" matInput placeholder="Enter your email" id="email" name="email" [formControl]="email" required>
              <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
          </mat-form-field></td>
          <td><mat-form-field class="example-full-width">
              <mat-select placeholder="Select Role">
                <mat-option *ngFor="let role of roles" [value]="role" value="option"  required>{{role}}</mat-option>
              </mat-select>
            </mat-form-field></td>
          </tr></table>

        <mat-form-field>
            <input type="password" matInput placeholder="Enter your password" id="password" name="password" [type]="hide ? 'password' : 'text'">
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
        <button type="button" class="btn btn-info d-none d-lg-block m-l-15" type="submit">Sign Up</button>
      </form>