模板驱动形式的角度材料Mat-Chip验证

2 回答

• 5

  在您的保存按钮中，您可以使用已有的已禁用属性，但应该是这样的：

  [disabled]="company_name === undefined || fruits.length === 0"
  

  对于其他人来这个问题：

  您可以使用另一个很棒的软件包，它可以为您的标签提供验证，它的名称为 ng-chips .

  Git Repo ：github.com/Gbuomprisco/ngx-chips

  Online Demo ：angular-mfppay.stackblitz.io

  回复于 2024-04-26T05:37:19+08:00
• 1

  Solution

  HTML：

  <form #sampleForm="ngForm">
  
      <mat-form-field class="example-chip-list">
          <input matInput placeholder="Company Name" required="true" name="company_name" [(ngModel)]="company_name">
      </mat-form-field>
  
      <mat-form-field class="example-chip-list">
          <mat-chip-list #chipList>
              <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
                  {{fruit}}
                  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
              </mat-chip>
              <input placeholder="New fruit..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
          </mat-chip-list>
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
              <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
                  {{fruit}}
              </mat-option>
          </mat-autocomplete>
      </mat-form-field>
  
  
      <button fxFlex="30" mat-raised-button color="primary" [disabled]="!sampleForm.form.valid || company_name === undefined || fruits.length === 0">Save</button>
  </form>
  

  回复于 2024-04-26T05:37:19+08:00