Angular 5 Material Design 全宽输入

Question

我是 angular 5 的新手，所以我需要制作一个带有全角输入的表单，并且我希望每个输入都占用其容器的整个宽度，但是，它只占用它的一半。

这是我得到的

我正在使用有角度的材料，这是我的代码：

<mat-grid-tile class="add-product-content" [rowspan]="4">
    <form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()">
        <mat-accordion >
            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" >
              <mat-expansion-panel-header>
                <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>
              <div class="input-container">
                  <div class="flex-item">
                      <mat-form-field>
                          <input matInput placeholder="First name">
                      </mat-form-field>
                  </div>
                  <div class="flex-item">
                      <mat-form-field>
                        <input matInput type="number" min="1" placeholder="Age">
                      </mat-form-field>
                  </div>
              </div>
              <mat-action-row>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
           </mat-expansion-panel>

           <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" >
              <mat-expansion-panel-header>
                  <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>

              <mat-form-field>
                  <input matInput placeholder="First name">
              </mat-form-field>
              <mat-form-field>
                  <input matInput type="number" min="1" placeholder="Age">
              </mat-form-field>
              <mat-action-row>
                  <button mat-button color="warn" (click)="prevStep()">Previous</button>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
          </mat-expansion-panel>
      </mat-accordion>
      <button mat-raised-button type="submit" class="actionButton">add</button>
    </form>
</mat-grid-tile>

谢谢。

Answer 1

在你的所有 . 中mat-form-field，你需要添加一个类，你可以调用你想要的名字，但我会这样称呼它full-width-field，最后，它看起来像这样。

HTML：

<mat-form-field class="full-width-field">
  <input matInput type="number" min="1" placeholder="Age">
</mat-form-field>

CSS：

.full-width-field {
   width: 100%;
}

来自Angular Material Docs 的示例