如何在单击按钮时向 angular 表单添加更多文本框？

Question

我有一个带有单个文本框的表单，允许 35 个字符。我希望用户能够单击一个按钮将另一个相同的文本框添加到下面的表单中，该文本框也允许 35 个字符。添加按钮只允许再添加 3 个文本框。是否有捷径可寻？这是我到目前为止的代码。我的第一个想法是将相同的代码复制 4 次并隐藏它直到单击按钮，但想知道是否可以在数组或某种函数中完成此操作以避免如此多的重复。谢谢！

HTML

<div>
  <h2>Title</h2>

     <div>
       <mat-form-field appearance=outline>
         <mat-label>Title</mat-label>
         <input matInput formControlName="Title" maxlength="35" required>
       </mat-form-field>
     </div>

  <button>Add Line</button>

</div>

Answer 1

根据 this and this 的回答，您需要执行以下操作：

        count_user_click = 0;
        function addFields() {
            if (this.count_user_click == 3) {
                alert('too many times!');
            }
            else {
                // increase counter
                this.count_user_click += 1;
                var container = document.getElementById("container");
                // get the element with that id
                let clone = document.querySelector('#tobecopied').cloneNode(true);
                // Change the id attribute of the newly created element:
                clone.setAttribute('id', 'new' + this.count_user_click);
                // Append the newly created element on container 
                container.appendChild(clone);
            }
        }

<div>
        <h2>Title</h2>
        <div>
            <mat-form-field appearance=outline id="tobecopied">
                <mat-label>Title</mat-label>
                <input matInput formControlName="Title" maxlength="35" required />
                <br >
            </mat-form-field>
        </div>
        <button onclick="addFields()">Add Line</button>
        <div id="container" />
    </div>

这是我认为实现您所寻找的最简单的方法。
祝你好运！

如何在单击按钮时向 angular 表单添加更多文本框？

How do I add more textboxes to an angular form on a button click?

html

arrays

angular

angular-reactive-forms

formgroups