我正在处理联系表单,但无法让表单使用 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>
// typescript
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)"
最佳答案
有了这个符号
<textArea [(ngModel)]="q4" name="q4" rows="5" cols="60" required>
你让 Angular 感到困惑。它同时拥有名称和应处理的 ngModel,因此它举起双手说“废话”,我的意思是“未定义”。看看你之前是怎么用输入做的?尝试
<textArea [(ngModel)]="q4" rows="5" cols="60" required>
或者
<textArea ngModel name="q4" rows="5" cols="60" required>
关于angular - 如何将表单控件添加到 angular 8 中的文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58807090/