web-dev-qa-db-ja.com

Angular 6:反応型フォームのupdateOn: 'submit'は、送信後に値を更新していません

私はAngular updateOnパラメータを使用した反応フォーム検証を使用してテストしていますが、updateOn: 'submit'を渡すと、最も単純なフォームでも正しく機能しないようです(他の値は正常に動作しています)。

app.component.html:

<form novalidate (submit)="onSubmit()">
  <input type="text" [formControl]="form.get('test')">

  Value: {{ form.get('test').value }}

  <button type="submit">SUBMIT</button>
</form>

app.component.ts:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  public form = new FormGroup({
    test: new FormControl('', { validators: [Validators.required], updateOn: 'submit'}),
  });

  public onSubmit(): void {
    console.log('Submitted:');
    console.log(this.form.value); // Got: Object { test: "" }
  }
}

完全で機能するコード: https://codesandbox.io/s/67pmd

ボタンをクリックした後、空のフィールド値(HTMLとコンソールの両方)が表示されます。しかし、updateOnをデフォルトに変更/そのままにしておけば、問題なく動作します。私の見たところ、値と検証はフォームの送信後にのみ更新する必要がありますが、更新されていないようです。ここで何が欠けていますか?

3
Gytis Tenovimas

_[formGroup]_ファイルのonSubmit()メソッドでフォームの値をバインドするには_component.ts_を使用し、フォームのフィールドの値をバインドするにはformControlNameを使用する必要があります。

_import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-custom-form-controls-example',
  templateUrl: './custom-form-controls-example.component.html'
})
export class CustomFormControlsExampleComponent implements OnInit {
  myForm: FormGroup

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      mySwitch: [true]
    });
  }

  submit() {
    console.log(`Value: ${this.myForm.controls.mySwitch.value}`);
  }
}
_
_<h3>Reactive Forms</h3>
<form [formGroup]="myForm" (ngSubmit)="submit()">
  <label for="switch-2">Switch 2</label>
  <app-switch formControlName="mySwitch" id="switch-2"></app-switch>
  <button>Submit</button>
</form>
_

参考

0
Rakesh Tanwar