如何将Angular mat-chip-list与textarea结合？解决内容溢出问题

1. 修改HTML结构 #

调整mat-chip-list的容器样式以支持滚动，同时将原input替换为textarea，手动处理输入事件（因matChipInput指令仅支持原生input标签）：

<mat-form-field appearance="outline" class="col">
    <mat-label>Email</mat-label>
    <div class="scrollable-chip-container">
        <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>
        </mat-chip-list>
        <!-- 替换为textarea并手动绑定输入逻辑 -->
        <textarea 
            placeholder="输入邮箱（逗号或回车分隔）" 
            (blur)="addFromTextarea()"
            (keydown.enter)="handleEnter($event)"
            (keydown.comma)="handleComma($event)"
            #emailTextarea
        ></textarea>
    </div>
    <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>

2. 添加CSS样式 #

给chip容器设置滚动属性，同时调整textarea样式适配布局：

.scrollable-chip-container {
    position: relative;
    max-height: 150px; /* 可根据需求自定义最大高度 */
    overflow-y: auto;
    padding-bottom: 40px; /* 为textarea预留空间 */
}

.scrollable-chip-container textarea {
    position: absolute;
    bottom: 0;
    width: 100%;
    border: none;
    resize: none;
    height: 36px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

/* 消除mat-form-field默认内边距冲突 */
mat-form-field .mat-form-field-flex {
    padding-bottom: 0;
}

3. 调整TypeScript逻辑 #

修改组件方法，适配textarea的输入处理：

@ViewChild('emailTextarea') emailTextarea!: ElementRef<HTMLTextAreaElement>;

// 阻止回车默认换行，直接触发添加逻辑
handleEnter(event: KeyboardEvent) {
    event.preventDefault();
    this.addFromTextarea();
}

// 阻止逗号默认输入，直接触发添加逻辑
handleComma(event: KeyboardEvent) {
    event.preventDefault();
    this.addFromTextarea();
}

// 从textarea提取并批量添加邮箱
addFromTextarea() {
    const value = this.emailTextarea.nativeElement.value.trim();
    if (!value) return;

    // 按逗号或换行分割输入内容，过滤空值
    const emails = value.split(/[,|\n]/).map(email => email.trim()).filter(email => email);
    
    emails.forEach(email => {
        // 验证邮箱格式（复用原有验证逻辑）
        const isValid = this.validateEmail(email);
        if (isValid && !this.emailList.some(item => item.value === email)) {
            this.emailList.push({ value: email });
            this.siteForm.controls['email'].setValue(this.emailList);
        }
    });

    // 清空textarea内容
    this.emailTextarea.nativeElement.value = '';
}

// 邮箱格式验证方法
validateEmail(email: string): boolean {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
}

// 保留原有移除邮箱方法
removeEmail(item: any) {
    const index = this.emailList.indexOf(item);
    if (index >= 0) {
        this.emailList.splice(index, 1);
        this.siteForm.controls['email'].setValue(this.emailList);
    }
}

关键说明 #

• 因Angular Material的matChipInput指令不兼容textarea，需手动监听键盘事件和失焦事件实现邮箱添加逻辑。
• 通过给chip容器设置max-height和overflow-y: auto，实现chip超出数量时滚动显示。
• 调整textarea的定位与样式，使其融入mat-form-field布局，避免视觉冲突。
• 复用原有表单验证逻辑，确保添加的邮箱格式符合要求。

内容的提问来源于stack exchange，提问作者Zahid shaikh