<h2 id="%E8%A6%81%E7%B4%84">
<a class="header-anchor-link" href="#%E8%A6%81%E7%B4%84" aria-hidden="true"></a> 要約</h2>
<ul>
<li>動的制御している <code>input</code> の <code>maxlength</code> が空(null, undefined のとき)勝手に <code>0</code> になっていた</li>
<li>原因は <code>[maxLength] </code>でのバインド</li>
<li>解決策は <code>[attr.maxlength]</code> を使う</li>
</ul>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" aria-hidden="true"></a> サンプル</h2>
<p>NGの方は <code>maxLength="0"</code> でレンダリングされているため入力できないことがわかる<br>
サンプルはv7だが、v11でも同様の現象を確認済み</p>
<span class="embed-block embed-stackblitz"><iframe src="https://stackblitz.com/edit/maxlength?embed=1&amp;file=app/app.component.html" scrolling="no" frameborder="no" loading="lazy"></iframe></span>
<hr>
<p><code>max</code>や<code>min</code>の他の属性は大丈夫だったので地味な罠だった...🥺<br>
<a href="https://www.ykicchan.dev/posts/2021-03-21" target="_blank" rel="nofollow noopener noreferrer">転載元</a></p>


Angular で maxlength が勝手に 0 になる

要約

サンプル

Discussion