javascript - Angular 5 Material 设计全 Angular 输入

Question

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

这里是 what I'm getting

我正在使用 Angular Material 这是我的代码:

<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