如何让Angular Material的MatInput达特定宽度后自动换行并增高？

Got it, let's solve this! You want to use Angular Material's MatInput for your chat message input, with the same auto-wrapping and height-adjusting behavior as MatTextarea—here's how to do it smoothly:

Key Approach #

Instead of using a single-line <input matInput>, we'll leverage the fact that MatInput works seamlessly with <textarea> elements. Pair this with Angular CDK's autosize directive to handle automatic height adjustments, and add a few CSS rules to enforce your desired width and wrapping behavior.

Step 1: Import Required Modules #

First, make sure you have all the necessary Angular Material and CDK modules imported in your app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { TextFieldModule } from '@angular/cdk/text-field'; // For autosize functionality

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    TextFieldModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Build the Input Template #

Create your chat input using <textarea matInput> with the CDK autosize directive to handle auto-height:

<mat-form-field appearance="outline" class="chat-input">
  <mat-label>Type your message...</mat-label>
  <textarea 
    matInput
    cdkTextareaAutosize
    cdkAutosizeMinRows="1" <!-- Initial height (matches single line) -->
    cdkAutosizeMaxRows="5" <!-- Optional: Limit max height to avoid overly tall inputs -->
    rows="1"
    resize="none" <!-- Prevent manual resizing by users -->
    placeholder="Type your message...">
  </textarea>
  <mat-icon matSuffix>send</mat-icon>
</mat-form-field>

Step 3: Add Custom CSS #

Enforce your specific width and ensure proper text wrapping:

.chat-input {
  width: 450px; /* Replace with your desired fixed width */
}

.chat-input textarea {
  white-space: pre-wrap; /* Preserve line breaks and wrap text naturally */
  word-wrap: break-word; /* Break long words to fit the input width */
  overflow: hidden; /* Hide scrollbar until maxRows is reached */
}

/* Optional: Tighten up the form field padding for a chat-friendly look */
.mat-form-field-wrapper {
  padding-bottom: 0.25em;
}

Why This Works #

• <textarea matInput>: Gives you the multi-line/wrapping behavior you need while retaining all Angular Material MatInput styling and features (like form validation, suffix icons, etc.).
• cdkTextareaAutosize: Automatically calculates the height of the textarea based on its content, adjusting as the user types. The minRows and maxRows properties let you control the input's size limits.
• CSS Rules: Ensure the input stays at your specified width, text wraps correctly, and the UI stays clean without unnecessary scrollbars or resizing handles.

Alternative: Manual Height Adjustment (No CDK) #

If you prefer not to use Angular CDK, you can listen to the input event and adjust the height manually. Add this to your component:

import { ElementRef, ViewChild } from '@angular/core';

// In your component class
@ViewChild('chatTextarea') chatTextarea!: ElementRef<HTMLTextAreaElement>;

onInput() {
  const textarea = this.chatTextarea.nativeElement;
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

And update the template to add the #chatTextarea reference and input listener:

<textarea 
  #chatTextarea
  matInput
  rows="1"
  resize="none"
  (input)="onInput()"
  placeholder="Type your message...">
</textarea>

Note: The CDK method is more robust as it handles edge cases like font changes, window resizing, and form field state changes automatically.

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