&lt;文本区域&gt;添加 formControlName <textarea> 时默认内容消失元素 [英] &lt;textarea&gt; default content disappears when adding formControlName the &lt;textarea&gt; element

问题描述

我正在尝试在 Angular 4.0.2 中创建一个响应式表单，它有一个 <textarea> 字段，其中包含从数据库中提取的默认内容.</code> 中的内容显示没有任何问题，但是当我将 <code>formControlName="sectionContent"</code> 添加到 <code><textarea></code> 时> 元素，它的内容消失了.<em class="showen"></em></p> <p class="en">I'm trying to create a Reactive Form in Angular 4.0.2, which has a <code><textarea></code> field with default content, pulled from the database. The content in the <code><textarea></code> is showing without any issues, but when I add the <code>formControlName="sectionContent"</code> to the <code><textarea></code> element, the content from it disappears.</p> <p class="cn"><code><textarea formControlName="sectionContent ">{{ section.sectionContent }}</textarea</code>></p> <p class="cn">此问题仅发生在 <code><textarea></code> 元素上，因为表单中有其他 <code><input></code> 字段，但这些内容仍在出现.<em class="showen"></em></p> <p class="en">This issue is only happening with the <code><textarea></code> element, as I have other <code><input></code> fields in the form, but those contents are still appearing.</p> <p class="cn">FormGroup 如下所示:<em class="showen"></em></p> <p class="en">The FormGroup looks like this:</p> <pre><code><code>this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl() }); </code></code></pre> <p class="cn">有人遇到过这个问题吗?<em class="showen"></em></p> <p class="en">Did anyone encountered this issue?</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">改用默认值</p> <pre><code><code>this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl(this.section.sectionContent) }); </code></code></pre> <p class="cn">模板</p> <pre><code><code><textarea formControlName="sectionContent"></textarea> </code></code></pre> <p class="cn">或使用 setValue/pathValue:<em class="showen"></em></p> <p class="en">or using setValue/pathValue:</p> <pre><code><code>this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl() }); // after received data this.sectionForm.patchValue({sectionContent: this.section.sectionContent}); </code></code></pre> <p class="cn">演示:<a href="https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview" rel="noreferrer">https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview</a></p> <p class="cn">文档:</p> <p class="cn"><a href="https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html" rel="noreferrer">https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html</a><a href="https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html" rel="noreferrer">https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html</a></p> <p class="cn">设置值:</p> <p class="cn">设置 FormGroup 的值.它接受一个匹配的对象组的结构，以控件名称为键.<em class="showen"></em></p> <blockquote class="en"> <p>Sets the value of the FormGroup. It accepts an object that matches the structure of the group, with control names as keys.</blockquote> <p class="cn">这个方法执行严格的检查，所以如果你尝试设置不存在的控件的值，或者如果您排除控件的值.<em class="showen"></em></p> <p class="en">This method performs strict checks, so it will throw an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control.</p> <p class="cn">补丁值:</p> <p class="cn">修补 FormGroup 的值.它接受一个具有控制权的对象名称作为键，并将尽最大努力将值匹配到正确的组内控制.<em class="showen"></em></p> <blockquote class="en"> <p>Patches the value of the FormGroup. It accepts an object with control names as keys, and will do its best to match the values to the correct controls in the group.</blockquote> <p class="cn">它同时接受组的超集和子集而不抛出一个错误.<em class="showen"></em></p> <p class="en">It accepts both super-sets and sub-sets of the group without throwing an error.</p> <p>这篇关于&lt;文本区域&gt;添加 formControlName <textarea> 时默认内容消失元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2515383');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="&lt; textarea&gt;将formControlName添加到&lt; textarea&gt;时，默认内容消失.元素" href="/1925529.html"> &lt; textarea&gt;将formControlName添加到&lt; textarea&gt;时，默认内容消失.元素; </a> </li> <li> <a target="_blank" title="&amp; lt; textarea&amp; gt;当将formControlName添加到&amp; lt; textarea&amp; gt;时，默认内容消失元素" href="/2176154.html"> &amp; lt; textarea&amp; gt;当将formControlName添加到&amp; lt; textarea&amp; gt;时，默认内容消失元素; </a> </li> <li> <a target="_blank" title="如何使文本区域适合当前视口的宽度(&lt；textarea&gt；)？" href="/2880006.html"> 如何使文本区域适合当前视口的宽度(&lt；textarea&gt；)？; </a> </li> <li> <a target="_blank" title="如何在html文本区域的开头添加默认文本？" href="/1065920.html"> 如何在html文本区域的开头添加默认文本？; </a> </li> <li> <a target="_blank" title="无法获取&lt; ...&gt;中包含的文本区域内容在servlet中" href="/1000224.html"> 无法获取&lt; ...&gt;中包含的文本区域内容在servlet中; </a> </li> <li> <a target="_blank" title="Codeigniter:使用&lt; script&gt;提交文本区域里面" href="/2216409.html"> Codeigniter:使用&lt; script&gt;提交文本区域里面; </a> </li> <li> <a target="_blank" title="转换&lt; br /&gt;进入文本区域使用的新行" href="/861199.html"> 转换&lt; br /&gt;进入文本区域使用的新行; </a> </li> <li> <a target="_blank" title="使用画布元素作为文本区域" href="/2612792.html"> 使用画布元素作为文本区域; </a> </li> <li> <a target="_blank" title="Chrome中textarea的默认字体样式是什么？ （文本输入与文本的文本区域“大小”）" href="/2040679.html"> Chrome中textarea的默认字体样式是什么？ （文本输入与文本的文本区域“大小”）; </a> </li> <li> <a target="_blank" title="获取&lt; TextArea&gt;文本" href="/1070298.html"> 获取&lt; TextArea&gt;文本; </a> </li> <li> <a target="_blank" title="在文本区域元素上使用onload" href="/2271686.html"> 在文本区域元素上使用onload; </a> </li> <li> <a target="_blank" title="单击提交时验证文本区域" href="/2121880.html"> 单击提交时验证文本区域; </a> </li> <li> <a target="_blank" title="如何将特定文本从文本区域放到文本区域" href="/1200405.html"> 如何将特定文本从文本区域放到文本区域; </a> </li> <li> <a target="_blank" title="如何根据内容调整文本区域的大小" href="/2118184.html"> 如何根据内容调整文本区域的大小; </a> </li> <li> <a target="_blank" title="如何从内容页访问文本区域价值" href="/255378.html"> 如何从内容页访问文本区域价值; </a> </li> <li> <a target="_blank" title="根据内容自动调整文本区域的大小" href="/581334.html"> 根据内容自动调整文本区域的大小; </a> </li> <li> <a target="_blank" title="如何在 JOptionPane 上添加文本区域" href="/2427557.html"> 如何在 JOptionPane 上添加文本区域; </a> </li> <li> <a target="_blank" title="清除文本区域并重置文本区域的字符数" href="/1491701.html"> 清除文本区域并重置文本区域的字符数; </a> </li> <li> <a target="_blank" title="如何为html&lt; textarea&gt;添加默认值？" href="/860775.html"> 如何为html&lt; textarea&gt;添加默认值？; </a> </li> <li> <a target="_blank" title="如何在点击时展开文本区域" href="/570864.html"> 如何在点击时展开文本区域; </a> </li> <li> <a target="_blank" title="&lt; textarea ... /&gt;" href="/1042784.html"> &lt; textarea ... /&gt;; </a> </li> <li> <a target="_blank" title="jQuery:textarea默认值在点击时消失" href="/2791633.html"> jQuery:textarea默认值在点击时消失; </a> </li> <li> <a target="_blank" title="将所选内容保留在文本区域中" href="/2888699.html"> 将所选内容保留在文本区域中; </a> </li> <li> <a target="_blank" title="是否将内容设置为多个TinyMCE文本区域?" href="/1812470.html"> 是否将内容设置为多个TinyMCE文本区域?; </a> </li> <li> <a target="_blank" title="如何从多个文本区域中获取tinyMCE内容" href="/1484268.html"> 如何从多个文本区域中获取tinyMCE内容; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = 'lt,文本,区域,gt,添加,formcontrolname,textarea,时,默认,内容,消失,元素'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>