Mat-form-field Textarea 用新行保存 - CSS

在Angular中，mat-form-field 是用来包装表单控件的一个组件，它封装了表单控件和表单标签。在这个组件中，textarea 是一种常见的表单控件，用于输入或编辑多行文本。

在默认情况下，当我们在textarea中按下Enter键时，它不会保存为新行。相反，它会将新行换成了一个文本框。

这就是我们需要使用CSS来修改默认行为的原因。

我们可以使用以下CSS代码将textarea设置为在按下Enter键时保存为新行：

::ng-deep .mat-form-field textarea {
    white-space: pre-wrap;
}

在这里，我们使用了“::ng-deep”伪元素来深入到组件中，找到所需的textarea。然后，我们将“white-space”属性设置为“pre-wrap”。这将允许在textarea中使用空格和回车符。

现在，当您在textarea中按下Enter键时，它将保存为新行，而不是替换为文本框。

希望这种方法对您有帮助！

## Mat-form-field Textarea 用新行保存 - CSS

在Angular中，[mat-form-field](https://material.angular.io/components/form-field/overview) 是用来包装表单控件的一个组件，它封装了表单控件和表单标签。在这个组件中，[textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 是一种常见的表单控件，用于输入或编辑多行文本。

在默认情况下，当我们在textarea中按下Enter键时，它不会保存为新行。相反，它会将新行换成了一个文本框。

这就是我们需要使用CSS来修改默认行为的原因。

我们可以使用以下CSS代码将textarea设置为在按下Enter键时保存为新行：

::ng-deep .mat-form-field textarea { white-space: pre-wrap; }

在这里，我们使用了“::ng-deep”伪元素来深入到组件中，找到所需的textarea。然后，我们将“white-space”属性设置为“pre-wrap”。这将允许在textarea中使用空格和回车符。

现在，当您在textarea中按下Enter键时，它将保存为新行，而不是替换为文本框。

希望这种方法对您有帮助！