表单中的 Angular 5 输入不会更新 formControl

Posted

技术标签:

【中文标题】表单中的 Angular 5 输入不会更新 formControl【英文标题】:Angular 5 input in a form doesn't update the formControl 【发布时间】:2018-07-04 19:45:15 【问题描述】:

我正在尝试从here 复制第一个概述,但我无法进入步进器的最后一步,因为第二步永远不会被接受,即使我在分配给 queryCtrl 控件的输入中写了一些东西.这是我的代码:

html

<div>
  <mat-horizontal-stepper [linear]="true">
    <mat-step [stepControl]="criterionFormGroup">
      <form [formGroup]="criterionFormGroup">
        <ng-template matStepLabel>Select the filter criterion</ng-template>
        <mat-form-field>
          <mat-select placeholder="Criterion" formControlName="critCtrl" required>
            <mat-option value="description">Description</mat-option>
            <mat-option value="user">User</mat-option>
            <mat-option value="status">Status</mat-option>
            <mat-option value="unit">Unit</mat-option>
            <mat-option value="created_timestamp">Created</mat-option>
            <mat-option value="modified_timestamp">Modified</mat-option>
          </mat-select>
        </mat-form-field>
        <button class="btn" mat-button matStepperNext>Next</button>
      </form>
    </mat-step>
    <mat-step [stepControl]="filterValueForm">
      <form [formGroup]="filterValueForm">
        <ng-template matStepLabel>Specify the criterion</ng-template>
        <mat-form-field>
          <input matInput placeholder="Description contains..." formContorlName="queryCtrl">
        </mat-form-field>
        <button class="btn" mat-button matStepperNext>Next</button>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Finish</ng-template>
    </mat-step>
  </mat-horizontal-stepper>
</div>

TS:

import  Component, OnInit  from '@angular/core';
import  MatDialog, MAT_DIALOG_DATA  from '@angular/material';
import FormBuilder, FormGroup, Validators from '@angular/forms';
import  FormGroupDirective  from '@angular/forms/src/directives/reactive_directives/form_group_directive';


export class Filter 
  action;
  name;
  constructor(action, name) 
    this.action = action;
    this.name = name;
  



@Component(
  templateUrl: 'filter.html'
)
export class FilterComponent implements OnInit 
  criterionFormGroup: FormGroup;
  filterValueForm: FormGroup;

  criterion;

  descriptionQuery;

  constructor(private _formBuilder: FormBuilder) 

  

  ngOnInit() 
    this.criterionFormGroup = this._formBuilder.group(
      critCtrl: ['', Validators.required]
    );
    this.filterValueForm = this._formBuilder.group(
      queryCtrl: ['', Validators.required]
    );
  

这是我已经知道的:当我在分配给它们的输入字段中输入值时,queryCtrl 控件的值不会得到更新。我尝试了几种变体,比如将输入放在第一步中,但同样的事情发生了。我可能遗漏了一些微不足道的东西,但我对角度缺乏经验,因此将不胜感激。

【问题讨论】:

【参考方案1】:

这是因为拼写错误...

你说:

formContorlName="queryCtrl">

什么时候应该:

formControlName="queryCtrl">

干杯。

【讨论】:

以上是关于表单中的 Angular 5 输入不会更新 formControl的主要内容,如果未能解决你的问题,请参考以下文章

在Angular 5的子组件中与@Input绑定时,复选框的选中状态不会更新

有没有更好的方法将值推送到表单控件,其中数组作为 Angular 中的值

Angular 2使用getter和setter将输入表单值与模型绑定

Angular2嵌套模板驱动表单

angular - 指令中表单元素之间动态变化的验证要求

在 Angular 5 和 KendoUI 上,必需的输入文本框始终无效