web-dev-qa-db-ja.com

Ionic3 / Angularエラー：「jobStatus」という名前のフォームコントロールに値を指定する必要があります

テンプレートマークアップに次のコードを含むモーダルフォームがあります

  <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と表示されるため、エラーはそのセクションの何かである必要があります。

angulartypescriptionic3angular-reactive-formsion-select
10
JGFMK

正しい...「コメント」と呼ばれる単一のフォームコントロールのみを使用していたフォームがありました。

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);

フォームに2つのフィールドがあったからです...

その後、すべてが適切に配置され、フォームフィールドを提供していないという誤解を招くメッセージが消えました。

私はAngularの構文が嫌いです。1からnの値になったときの動作を変更します！

7
JGFMK

私の問題は、すべてのフォーム制御値を提供するではなかったことです。例えば：

<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: "" });
16
Arthur Silva

PatchValueを使用して、1つ以上の入力を個別に設定することもできます。

this.form.patchValue({ first: "whatever" });
3
Terje Nesthus

ここに

private jobStatus:number;

jobStatus値は「undefined」です。

値を設定します。

private jobStatus:number = 0;

それを機能させるために。

0
Vega