ngForm将undefined发送到ngSubmit函数

时间:2018-04-10 13:15:51

标签: angular

HTML

{
    "_id" : ObjectId("5abb735eb57dce214009035a"),
    "date" : 1262300400,
    "data" : {
        "magnitude1" : {
            "value" : 60
        },
        "magnitude2" : {
            "value" : 38
        },
        "magnitude3" : {
            "value" : 200
        },
        "magnitude4" : {
            "value" : 62
        },
        "magnitude5" : {
            "value" : 153
        },
        "magnitude6" : {
            "value" : 176
        },
        "magnitude7" : {
            "value" : 185
        },
        "magnitude8" : {
            "value" : 168
        },
        .
        .
        .

TS

<form class="row"  #stepOneForm="ngForm" (ngSubmit) = "updateDetails(stepOneForm)">
  <div class="col-md-8">

    <div class="row">
      {{stepOneForm.valid}}
      <div class="form-group col-md-4">
        <label for="">Select Loan Type:</label>
        <select class="form-control"
          [(ngModel)] = "loan_data.loan_type"
          #loanType = "ngModel"
          name = "loan_type"
          required
        >

          <option value="1">Personal Loan</option>
          <option value="2">Home Loan</option>
          <option value="3">Car Loan</option>
          <option value="4">Business Loan</option>
          <option value="5">Two wheeler Loan</option>
          <option value="6">Education Loan</option>
        </select>
      <div class ="error"  *ngIf = "loanType.touched && loanType.errors?.required">
        Plese select loan Type.
      </div>
    </div>

在这个投掷错误中,

  

无法阅读属性&#39;有效&#39;未定义的

请帮我解决这个问题,我花了将近2个小时的时间。

1 个答案:

答案 0 :(得分:0)

尝试使用

<form class="row"  [formGroup]="stepOneForm" (ngSubmit) = "updateDetails(stepOneForm)">
 ....
</form>

以这种方式在模板中指定表单组名称,并在提交时传递表单名称。希望这对你有用。