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

Question

我正在处理一个联系人表单，无法使用ngModel让表单提交textarea值。我一直从浏览器中得到一个错误，我会在下面发布

我尝试过使用reactiveforms，但最终还是遇到了和以前一样的问题和错误。

//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)"

Answer 1

所以从技术上讲，这段代码有两个不同的问题

流行音乐精彩地阐述了第一期。

第二个问题是文本区域不想在表单上表现得很好

为了解决第二个问题，必须将ngDefaultControl添加到文本区域，在将两个解决方案都添加到其中后，将生成的文本区域元素变成这样

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

Answer 2

使用此符号

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

你把Angular弄糊涂了。它既有名称，也有它应该处理的ngModel，所以它举起手来说"duh"，我的意思是，"undefined"。看看你以前是如何处理输入的？尝试

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

或

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