如何将表单控件添加到角度 8 中的文本区域

Posted

技术标签:

【中文标题】如何将表单控件添加到角度 8 中的文本区域【英文标题】:How to add formcontrol to a textarea in angular 8 【发布时间】:2020-03-07 11:29:27 【问题描述】:

我正在处理一个联系表单,但无法让表单使用 ngModel 提交 textarea 值。我不断收到来自浏览器的错误,我将在下面发布

我尝试过使用响应式表单,但最终遇到了与以前相同的问题和错误。

// html

<form #myform="ngForm" (ngSubmit)="send(myform)" autocomplete="off">
  <ol>
    <li>
      <label>What's your name?</label>
      <input ngModel name="q1" type="text" required/>
    </li>
    <li>
      <label>What's your email address?</label>
      <input ngModel name="q2" type="email" required/>
    </li>
    <li>
      <label>What's the purpose of the message?</label>
      <div>
        <span><input ngModel id="q3a" name="q3" type="radio" value="choice1" /><label for="q3a">choice 1</label></span>
        <span><input ngModel id="q3b" name="q3" type="radio" value="choice2" /><label for="q3b">choice 2</label></span>
        <span><input ngModel id="q3c" name="q3" type="radio" value="choice3" /><label for="q3c">choice 3</label></span>
      </div>
    </li>
    <li>
      <label>This is where your message goes!</label>
      <textArea [(ngModel)]="q4" name="q4" rows="5" cols="60" required>
      </textArea>
    </li>
  </ol>
  <input type="submit"/>
  <button type="submit">Send Message</button>
</form>

// 打字稿

send(form: NgForm)
  console.log(form.value);

// 控制台输出

q1: "name", q2: "email", q3: "choice1", q4: undefined

// 错误

Error: Uncaught (in promise): Error: No value accessor for form control with name: 'q4'
Error: No value accessor for form control with name: 'q4'
    at _throwError (forms.js:3313)
    at setUpControl (forms.js:3139)
    at forms.js:5963
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39698)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:862
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)"

【问题讨论】:

【参考方案1】:

所以从技术上讲,这段代码发生了 2 个不同的问题。

第一个问题被pop精彩地陈述了。

第二个问题是 textarea 不想很好地处理表单。

要解决第二个问题,必须将 ngDefaultControl 添加到 textarea 中,在将两个解决方案都添加到其中之后,将生成的 textarea 元素变成如下所示。

    <li>
      <label>This is where your message goes!</label>
      <textArea ngModel ngDefaultControl name="q4" rows="5" cols="60" required>
      </textArea>
    </li>

【讨论】:

【参考方案2】:

使用这个符号

<textArea [(ngModel)]="q4" name="q4" rows="5" cols="60" required>

你让 Angular 感到困惑。它同时具有它应该处理的名称和 ngModel,因此它举起双手说“duh”,我的意思是“未定义”。看看你之前是如何使用输入的?试试

<textArea [(ngModel)]="q4" rows="5" cols="60" required>

<textArea ngModel name="q4" rows="5" cols="60" required>

【讨论】:

我将其更改为 ``` ngModel name="q4" ``` 修复了未定义的问题,但浏览器仍然给出相同的错误,现在返回一个空字符串而不是未定义。

以上是关于如何将表单控件添加到角度 8 中的文本区域的主要内容,如果未能解决你的问题,请参考以下文章

Ruby/Rails - 正确显示/格式化文本区域表单控件中的文本

如何使用响应式表单将验证器添加到表单控件以从角度材料进行匹配输入

如何修复角度表单控件中的“找不到名称为 __v 的表单控件”错误?

如何阻止 Chrome 自动完成文本区域?

清除表单的文本区域和输入

如何将表单控件添加到 Django 表单?