Angular 6 textarea调整大小事件问题答案

【问题标题】：Angular 6 textarea resize event issueAngular 6 textarea调整大小事件问题
【发布时间】：2019-09-12 11:34:34
【问题描述】：

我正在开发一个 Angular 6 应用程序，其中有一个文本区域。出现错误时，应在右上角的文本区域旁边显示一个星号。我遇到的问题是调整 textarea 元素的大小，textarea 元素和星号之间存在间隙。我想我需要动态地将文本区域的宽度赋予星号。但是，我无法通过 CSS 或在其上获得 (resize) 事件。怎么办？任何帮助将不胜感激。

示例代码如下。

demo-file.html

<div class="col-6 fix-custom-width">
    <label for="dataVal"><span>*</span>Data Value</label>
    <textarea id="dataVal" placeholder="Max 20 Characters" tabindex="2"  type="text" class="form-control resizable-textarea" formControlName="dataVal" [ngClass]="{'is-invalid': dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)}" required></textarea>
    <span *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched || submitted)" class="display-inline error-asterisk">*</span>
    <div class="red-color" *ngIf="dataVal.errors && (dataVal.dirty || dataVal.touched) || submitted">
        <p *ngIf="dataVal.errors && dataVal.errors.required>
            Required
        </p>
    </div>
</div>

demo-file.css

.error-asterisk {
  position: absolute;
  right: 0px;
  top: 30px;
  color: $error-message-text-color;
}

.fix-custom-width {
  max-width: 100%;
}

.resizable-textarea {
  max-width: inherit;
  resize: both;
}

【问题讨论】：

标签： javascript html css angular6

【解决方案1】：

.textareaContainer{
   display:flex; 
}

<div class="textareaContainer">
    <textarea id="dataVal" placeholder="Max 20 Characters"></textarea>
   <span class="display-inline error-asterisk">*</span>
</div>

这可以通过display:flex; 轻松完成，默认情况下align-items 设置为flex-start，这意味着所有元素将从顶部开始，并且默认情况下 flex 将元素一个接一个地放置

【讨论】：

请检查我添加的更新代码。没有按预期工作。