Angular mat-chip单条限制与输入框样式交互问题咨询

以下是4个问题的对应实现方式，直接对应修改代码即可： #

1. 限制mat-chip最多添加1个且保留移除功能 #

不要给整个控件设置disabled属性，只在新增chip的逻辑入口加数量校验，移除逻辑不做任何限制：

1. 删除原先写在mat-chip-grid、输入框上的[disabled]="selectedOption >=1"配置
2. 在所有触发新增chip的方法（输入回车新增、下拉选项选中新增）开头加数量判断，示例代码：

// 输入回车新增chip
add(event: MatChipInputEvent): void {
  // 已有1个chip时直接阻断新增逻辑
  if (this.selectedOptions.length >= 1) {
    event.chipInput?.clear();
    return;
  }
  const val = (event.value || '').trim();
  if (val) this.selectedOptions.push(val);
  event.chipInput?.clear();
}

// 下拉选项选中新增chip
optionSelected(event: MatAutocompleteSelectedEvent): void {
  if (this.selectedOptions.length >= 1) return;
  this.selectedOptions.push(event.option.value);
  this.chipInput.clear();
}

// 移除chip的逻辑保持原有写法，不加任何限制
remove(option: string): void {
  const idx = this.selectedOptions.indexOf(option);
  if (idx >= 0) this.selectedOptions.splice(idx, 1);
}

实现后，达到1个chip时仅禁止新增，已添加的chip移除按钮可正常点击，删除后可重新添加新chip。 #

2. 第二个输入框支持自动换行 #

将第二个输入框的<input>标签替换为<textarea>，配合自动换行样式和自适应高度指令：

1. 模板替换示例：

<mat-form-field class="full-width">
  <textarea 
    matInput
    cdkTextareaAutosize
    #autosize="cdkTextareaAutosize"
    cdkAutosizeMinRows="2"
    cdkAutosizeMaxRows="8"
    [(ngModel)]="secondInputVal"
    class="multi-line-input"
  ></textarea>
</mat-form-field>

注意：需在所属Angular模块中导入TextFieldModule以支持cdkTextareaAutosize自动高度指令
2. 新增CSS样式控制折行：

.multi-line-input {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  resize: none;
}

配置后长文本会自动折行，不会出现水平溢出问题。 #

3. 输入光标定位到输入框顶部 #

覆盖Angular Material默认的垂直居中样式，将内容对齐方式改为顶部对齐：

::ng-deep .mat-mdc-form-field-infix {
  align-items: flex-start !important;
  padding-top: 0.75rem; /* 可根据UI规范调整顶部间距 */
  min-height: unset !important;
}
.multi-line-input {
  padding-top: 0;
  vertical-align: top;
}

配置后输入光标默认从输入框顶部开始定位，不再垂直居中。 #

4. 第二个输入框placeholder按条件显示 #

给placeholder做动态绑定，根据第一个输入框的内容判断是否显示：

1. 模板中修改第二个输入框的placeholder属性为动态绑定：

<textarea 
  matInput
  [placeholder]="firstInputVal?.trim() ? '请输入对应描述内容' : ''"
  cdkTextareaAutosize
  [(ngModel)]="secondInputVal"
  class="multi-line-input"
></textarea>

2. 确保第一个输入框通过[(ngModel)]或响应式表单绑定到firstInputVal变量即可。实现后第一个输入框为空时，第二个输入框无占位符；第一个输入框输入内容后，第二个输入框自动显示占位符。

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