如何动态地将FormControl添加到FormGroup

时间:2017-05-01 09:52:41

标签: angular typescript

我有plunker。我正在基于model(在app.ts中定义)动态创建表单组件,并且无法添加

formControlName = "name"

到组件。在control-factory.directive.ts我添加

this.form.addControl(this.model.name, new FormControl());

但是如何绑定值?

1 个答案:

答案 0 :(得分:6)

要保持表单值与您的自定义模型同步,我会订阅<div id="send-pin"> <h3>What's your phone number?</h3> <%= form_for @phone_number, remote: true, html: {id: "first_form"} do |f| %> <div class="form-group"> <%= f.text_field :phone_number %> </div> <%= f.submit "Send PIN", class: "btn btn-primary", id: 'send-pin-link' %> <% end %> </div> <div id="verify-pin"> <h3>Enter your PIN</h3> <%= form_tag phone_numbers_verify_path, remote: true do |f| %> <%= hidden_field_tag 'hidden_phone_number', '' %> <div class="form-group"> <%= text_field_tag :pin %> </div> <%= submit_tag "Verify PIN", class: "btn btn-primary" %> <% end %> <%=link_to "Resend Pin",'#', id: "resend_pin_code" %> </div> <div id="status-box" class="alert alert-success"> <p id="status-message">Status: Haven’t done anything yet</p> </div> <script> $("#resend_pin_code").click(function(){ $("#first_form").submit(); } ) </script>

control.valueChanges

保持同步形式模型和视图我会将let control = new FormControl(this.model.data); control.valueChanges.subscribe(x => { this.model.data = x; }); this.form.addControl(this.model.name, control); 绑定到被动指令,即FormControl

<强> datepicker.component.html

formControl

<强> Modified Plunker