我有plunker。我正在基于model
(在app.ts
中定义)动态创建表单组件,并且无法添加
formControlName = "name"
到组件。在control-factory.directive.ts
我添加
this.form.addControl(this.model.name, new FormControl());
,
但是如何绑定值?
答案 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 强>