Ionic3/Angular 错误：必须为表单控件提供一个值，名称为：'jobStatus'

Posted 2023-03-13

【中文标题】Ionic3/Angular 错误：必须为表单控件提供一个值，名称为：\'jobStatus\'

【英文标题】：Ionic3/Angular Error: Must supply a value for form control with name: 'jobStatus'Ionic3/Angular 错误：必须为表单控件提供一个值，名称为：'jobStatus'

【发布时间】：2018-04-24 11:00:05

【问题描述】：

我有一个模态表单，模板标记中有以下代码

  <form [formGroup]="modalFG">
  ...
  <ion-item *ngIf="isChangeStatus()">
      <ion-select formControlName="jobStatus"
                  (ionChange)="jobStatusChangeHandler($event)">
        <ion-option value=4>Success</ion-option> 
        <ion-option value=5>Failure</ion-option>
        <ion-option value=6>Terminated</ion-option> 
        <ion-option value=8>Inactive</ion-option> 
      </ion-select>
  </ion-item>
  </form>

在 Typescript 中我指定了一个值，但我无法克服这个错误。

错误：必须为表单控件提供一个值，名称为：'jobStatus'。

谁能告诉我我做错了什么？

...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
  private navParams:NavParams,
  private view:ViewController,
  private fb: FormBuilder,
  ...
) 
    this.changeStatus = false;
    this.modalFG = fb.group(
      comment: ['', Validators.required],
      jobStatus: this.jobStatus
    );

private ionViewWillLoad():void 
    const data = this.navParams.get('data');
    this.modalFG.setValue('jobStatus': this.jobStatus);


private jobStatusChangeHandler(ev:any) 
    console.log(ev);


private isChangeStatus():boolean 
    return this.changeStatus;

我也有用于提交的按钮处理程序：

this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);

这是完整的错误信息：

Error: Must supply a value for form control with name: 'jobStatus'.
    at http://localhost:8100/build/vendor.js:22102:23
    at http://localhost:8100/build/vendor.js:22026:66
    at Array.forEach (<anonymous>)
    at FormGroup._forEachChild (http://localhost:8100/build/vendor.js:22026:36)
    at FormGroup._checkAllValuesPresent (http://localhost:8100/build/vendor.js:22100:14)
    at FormGroup.setValue (http://localhost:8100/build/vendor.js:21907:14)
    at ModalPage.webpackJsonp.124.ModalPage.ionViewWillLoad (http://localhost:8100/build/main.js:648:22)
    at ModalImpl.ViewController._lifecycle (http://localhost:8100/build/vendor.js:17471:33)
    at ModalImpl.ViewController._willLoad (http://localhost:8100/build/vendor.js:17331:14)
    at OverlayPortal.NavControllerBase._willLoad (http://localhost:8100/build/vendor.js:44112:18)

由于它在调用堆栈中显示 ionViewWillLoad，因此错误必须是该部分中的某些内容 AFAIK！

【参考方案1】：

这里

private jobStatus:number;

jobStatus 值为“undefined”。

设置一个值：

private jobStatus:number = 0;

让它工作。

【讨论】：

我实际上已经尝试过代码，甚至没有将 jobStatus 作为类属性，并在 fb.group 语句和 set/get 中使用像 0 这样的文字。所以我认为即使这样也不会解决它。已尝试删除 *ngIf 条件，使 ion-option 上的值引用了作品...似乎没有什么可以阻止消息 Must provide a value for form control with name: 'jobStatus'。

【参考方案2】：

对... 我有一个表单，过去只有一个表单控件，称为“评论”。

当我添加第二个条件表单元素时，您需要使用的语法更改为 setValue...

我需要这样修改它：

  this.modalFG.setValue('comment': data.comment);
  this.modalFG.setValue('jobStatus': 0);

到：

  this.modalFG.controls['jobStatus'].setValue(0);
  this.modalFG.controls['comment'].setValue(data.comment);

因为我现在在表单上有两个字段...

然后一切都到位，关于未提供表单字段的误导性消息消失了。

我讨厌这里的 Angular 语法，当你从 1 变为 n 值时会改变它的运行行为！

【讨论】：

不一定，你应该可以做到：this.modalFG.setValue( 'comment': data.comment, 'jobStatus': 0 );

【参考方案3】：

我的问题是我没有提供所有表单控件值。例如：

<div formGroupName="form">
    <input formControlName="first">
    <input formControlName="second">
</div>

在这种情况下，如果您尝试使用方法setValue 并且不提供所有控制值，如下所示：

this.form.setValue( second: "" );

它会抛出一个错误。

解决方案

使用setValue 并为所有表单控件提供值：

this.form.setValue( first: "", second: "" );

或者，如果您确实打算设置部分值，请使用patchValue 方法：

this.form.patchValue( second: "" );

【讨论】：

嗨@Arthur Silva。下次我做一些 Ionic 工作时，我一定会看看这个。谢谢

【参考方案4】：

您也可以使用 patchValue 单独设置一个或多个输入：

this.form.patchValue( first: "whatever" );

【参考方案5】：

如果你必须在表单组中只设置一个 ctrl 值，你应该使用

this.formGroup.patchValue(),

如果您必须在表单组中设置所有 ctrl 值，您应该使用

this.formGroup.setValue(),

【参考方案6】：

“必须提供”告诉您将值传递给表单上的对象。例如：

想象一下这个场景：

  public form = this.fb.group(
    production: this.fb.group(
      name: [''],
      id: [''],
      screenName: [''],
    )
  );

当您从服务器收到此数据时，表单会等待 3 个对象...“name”、“id”和“screenName”。而且 PatchValue 工作正常。

但是，如果您收到数据，则只有 2 个对象：“名称”和“屏幕名称”，您尝试这样做：

const formProduction = this.form.get('production');
formProduction.patchValue(this.yourData);

您会收到有关“必须申请”的消息，因为表单等待所有数据。如果您强制强制转换，就会发生这种情况，如下所示：

const formProduction = this.form.get('production');
formProduction.patchValue(this.yourData as YourObject);

在讨论顶部的这种情况下，私有 jobStatus:number 会导致相同的错误。

修复它的简单方法是强制转换为未知：如果您的服务器不发送所有信息，则以角度形式仅接收收到的信息，并忽略其他字段。

const formProduction = this.form.get('production');
formProduction.patchValue(this.yourData as unknown);

;-)