Question

我只是在尝试添加和删除多个输入字段的位置。因此，当用户在两个或多个字段上提交时，结果将以数组形式给出。

我的html表单

    <form method="post" [formGroup]="formData">
         <div class="form-group">
            <label for="course">Enter Subject Name</label>
            <fieldset [formControl]="subjectControl">
              <input type="text" name="name[]"  multiple class="form-control" id="course" placeholder="subject name" />
              <br />
            </fieldset>
            <button id="addMore">Add more fields</button>
          </div>
          <button (click)="dataSubmit()" type="submit" [disabled]="" class="btn btn-primary">Submit</button>
    </form>

和jquery代码

$('#addMore').click(function(e) {
        e.preventDefault();
        $('fieldset:last').after('<fieldset><input [formControl]="subjectControl" type="text" name="name[]" ' +
          'multiple class="form-control" id="course" ' +
          'placeholder="subject name" /><br/></fieldset>');
      });

但是问题在于，在提交表单时，它仅提供来自首次输入的值。

Answer 1

您应该使用Angular DynamicForms，而不是JQuery，因为在视图/模板中这种方法可能还可以，但是angular不知道新的表单字段是什么。

这里有关于此的更多信息：https://angular.io/guide/dynamic-form

另一种方法是使用ReactiveForms构建FormArray并在该数组中添加FormControl对象的方法，以后可以使用传统的角度指令（例如{ {1}}，并使用*ngFor属性绑定FormGroup中的值。

我希望我能为您服务

工作示例

https://stackblitz.com/edit/angular-dynamic-form-fields

从角度4中的动态输入字段提交数组值

1 个答案: