Angular 表单只有在表单有效时才获取字段值
Angular form get field value only if form valid
我正在使用 angular 表单并在其字段中进行了一些验证。现在,我想在字段发生变化时获取它的值,但前提是表单处于有效状态。
<form [formGroup]="AddEditform" novalidate autocomplete="off">
<mat-form-field appearance="outline">
<textarea matInput name="user" formControlName="users" id="user">
</textarea>
<mat-error
*ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
>
Exceeded maximum length
</mat-error>
</<mat-form-field>
</form>
AddEditform: FormGroup;
constructor(
private fb: FormBuilder,
) { }
ngOnInit() {
this.AddEditform = this.fb.group({
users: [
'',
[
Validators.maxLength(100)
],
],
});
this.AddEditform.get('users').valueChanges.subscribe(data => {
if (this.AddEditform.valid) {
console.log(data);
}
});
}
目前,值一直打印到第一次违规发生时为止。在这种情况下,直到第 101 个字符。之后我没有得到任何值。但是为什么我得到第一个违规值?
查看 updateValueAndValidity
的源代码,我的猜测是子窗体控件的 valueChanges
事件发生在其父控件更新之前。
尽量保留对用户控件的引用并检查它自己的 valid
标志,而不是父控件的标志。
ngOnInit() {
this.UsersControl = this.fb.control('', [Validators.maxLength(100)]);
this.AddEditform = this.fb.group({
users: this.UsersControl
});
this.UsersControl.valueChanges.subscribe(data => {
if (this.UsersControl.valid) {
console.log(data);
}
});
}
要么,要么订阅整个表单 valueChanges
事件。
ngOnInit() {
this.AddEditform = this.fb.group({
users: ['', [Validators.maxLength(100)]]
});
this.AddEditForm.valueChanges.subscribe(data => {
if (this.AddEditForm.valid) {
console.log(data['users']);
}
});
}
您也可以使用此代码:
this.AddEditform.get('users').valueChanges.subscribe(data => {
setTimeout(() => {
if (this.AddEditform.valid) {
console.log(data);
}
}, 0);
});
我正在使用 angular 表单并在其字段中进行了一些验证。现在,我想在字段发生变化时获取它的值,但前提是表单处于有效状态。
<form [formGroup]="AddEditform" novalidate autocomplete="off">
<mat-form-field appearance="outline">
<textarea matInput name="user" formControlName="users" id="user">
</textarea>
<mat-error
*ngIf="!AddEditform.valid && AddEditform.get('users').hasError('maxlength')"
>
Exceeded maximum length
</mat-error>
</<mat-form-field>
</form>
AddEditform: FormGroup;
constructor(
private fb: FormBuilder,
) { }
ngOnInit() {
this.AddEditform = this.fb.group({
users: [
'',
[
Validators.maxLength(100)
],
],
});
this.AddEditform.get('users').valueChanges.subscribe(data => {
if (this.AddEditform.valid) {
console.log(data);
}
});
}
目前,值一直打印到第一次违规发生时为止。在这种情况下,直到第 101 个字符。之后我没有得到任何值。但是为什么我得到第一个违规值?
查看 updateValueAndValidity
的源代码,我的猜测是子窗体控件的 valueChanges
事件发生在其父控件更新之前。
尽量保留对用户控件的引用并检查它自己的 valid
标志,而不是父控件的标志。
ngOnInit() {
this.UsersControl = this.fb.control('', [Validators.maxLength(100)]);
this.AddEditform = this.fb.group({
users: this.UsersControl
});
this.UsersControl.valueChanges.subscribe(data => {
if (this.UsersControl.valid) {
console.log(data);
}
});
}
要么,要么订阅整个表单 valueChanges
事件。
ngOnInit() {
this.AddEditform = this.fb.group({
users: ['', [Validators.maxLength(100)]]
});
this.AddEditForm.valueChanges.subscribe(data => {
if (this.AddEditForm.valid) {
console.log(data['users']);
}
});
}
您也可以使用此代码:
this.AddEditform.get('users').valueChanges.subscribe(data => {
setTimeout(() => {
if (this.AddEditform.valid) {
console.log(data);
}
}, 0);
});