Angular Material和嵌套mat-form-field的CSS问题：错误状态的内部mat-form-field导致父级看起来处于错误状态

1 回答

• 0

  我想你可能会对 mat-form-field 的预期目的感到困惑...重要的是要注意奇点， mat-form-field 与 mat-form-fields

  在本文档中，“表单字段”是指包装组件<mat-form-field>，“表单字段控件”是指<mat-form-field>包装的组件（例如输入，textarea，select等）

  https://material.angular.io/components/form-field/overview

  ---

  尽管该描述可以解释...表单字段包装器的设计旨在是1：1 ...意味着1个包装器，1个控件 .

  • 审查form-field的所有stackblitz示例，您将看到这个1：1标准 .

  https://material.angular.io/components/form-field/examples

  通过将多个 mat-form-fields 包装在父 mat-form-field 中，你实际上将它们全部变成了一个大的 mat-form-field ，它将所有控件视为 errorState 样式方面的一个控件...如果一个无效，它们都是无效的，因为它是一个巨大的 form-field .

  ---

  在 people-list.component.html 中应用以下表单字段包装器，您将看到问题在 OUTSIDE MAT FORM FIELD 示例中被复制 .

  <div [formGroup]="form">
    <mat-form-field>
      <div formArrayName="rows" *ngFor="let p of rows.controls; let i=index">
          <div [formGroupName]="i" fxLayout="row" fxLayoutAlign="space-around center">
  
              <mat-form-field hintLabel="row number {{ i }}" class="full-width">
                  <input matInput type="text" formControlName="name"/>
                  <mat-hint align="end">Valid: {{ p.get('name').valid }}</mat-hint>
                  <mat-error *ngIf="p.get('name').hasError('required')">required</mat-error>
              </mat-form-field>
  
              <mat-form-field class="full-width">
                  <mat-select placeholder="Select state" formControlName="state">
                      <mat-option *ngFor="let state of stateList" [value]="state.abbreviation">
                          {{state.name}}
                      </mat-option>
                  </mat-select>
                  <mat-hint align="end">Valid: {{ p.get('state').valid }}</mat-hint>
                  <mat-error *ngIf="p.get('state').hasError('required')">required</mat-error>
              </mat-form-field>
  
              <button class="glyphicon glyphicon-remove pull-right" *ngIf="rows.length > 0"
                    (click)="removeStep(i)">Remove</button>
              <br>
          </div>
      </div>
      <br>
      <button [disabled]="!rows.valid"
              (click)="addStep()"
              type="button"
              color="primary"
              *ngIf="rows.length < maxlength">
          <span translate>ADD</span>
      </button>
      </mat-form-field>
  </div>
  

  ---

  您可能希望使用下面的内容探索在错误时复制表单字段样式 .

  在 app.component.scss 中创建 mat-form-field-underline 类

  .matFormFieldUnderline{
    bottom: 1.25em;
    background-color: rgba(0,0,0,.42);
    height: 1px;
    margin-top:5px;
  }
  

  然后在HTML中使用它并复制 mat-form-field 样式

  <h2>OUTSIDE MAT FORM FIELD</h2>
              <app-state-selector
                          name="people2"
                          [ngModel]="peopleList2"
                          #peopleRef2="ngModel"
                          required
                          maxlength=5
                  ></app-state-selector>
                  <div class="matFormFieldUnderline" [style.background-color]="peopleRef2.errors ? 'red' : null"></div>
                  <div fxLayout>
                    <div fxFlex="70">
                     <mat-hint *ngIf="!peopleRef2.errors?.rows">Valid component: {{ peopleRef2.valid }}</mat-hint>
                     <mat-error *ngIf="peopleRef2.errors?.rows">Valid component: {{ peopleRef2.valid }}</mat-error>
                    </div>
                    <div fxFlex="30" fxLayoutAlign="end"> 
                      <mat-hint>{{peopleRef2.value?.length || 0}} rows</mat-hint>
                    </div>
                  </div>  
                  <mat-error *ngIf="peopleRef2.errors?.required">required</mat-error>
                  <mat-error *ngIf="peopleRef2.errors?.maxlength">max 5 rows</mat-error>
  

  回复于 2024-04-27T02:44:30+08:00