Angular mat-chip-list 带文本区怎么用？

Question

<mat-form-field appearance="outline" class="col">
    <mat-label>Email</mat-label>
    <!-- <input formControlName="email" matInput placeholder="Email" required> -->
    <mat-chip-list #chipList formControlName="email">
        <mat-chip *ngFor="let item of emailList; let i=index" (removed)="removeEmail(item)"
            required>
            {{item.value}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        </mat-chip>
        <input placeholder="enter email " [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes " [matChipInputAddOnBlur]="true"
            (matChipInputTokenEnd)="add($event) " />
    </mat-chip-list>
    <mat-error *ngIf="isSiteFormFieldValid('email')">
        <span *ngIf="siteFormFields['email'].errors?.['required']">
            Email is required.
        </span>
        <span *ngIf="siteFormFields['email'].errors?.['email']">
            Email is not valid.
        </span>
    </mat-error>
</mat-form-field>

Instead of using tag I want to use text area since it can be scrollable and will look good.

As I am using input my data is getting overflow any solution or suggestion for that?

Answer 1

I do not think mat chip list supports textarea, but the chip list styles can be overridden

::ng-deep .mat-chip-list-wrapper {
  height: 36px; 
  overflow: auto;
}