私は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
をデフォルトに変更/そのままにしておけば、問題なく動作します。私の見たところ、値と検証はフォームの送信後にのみ更新する必要がありますが、更新されていないようです。ここで何が欠けていますか?
_[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>
_