我正在尝试以表格形式输入一些数据,但是它没有给我touched
状态。因此,向用户发送消息时总是会发生错误。
我在TS文件中使用FormBuilder
来存储HTML中的值。无论是否放入数据,都会出现此错误。
我迷路了。
错误
firstName: FormControl {validator: ƒ, asyncValidator: ƒ, _onCollectionChange:
ƒ, pristine: true, touched: false, …}
值:
value: {firstName: "", .... }
我试图检查
pristine
条件中的ngIf
,但事实并非如此。这是我的HTML代码:
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
这是我的TypeScript代码:
// Class Attributes
formInfo: FormGroup;
submitted = false;
success = false;
constructor(private builder: FormBuilder) { }
// Form data as an object
ngOnInit() {
this.formInfo = this.builder.group({
firstName: ['', Validators.required],
....
});
}
// Validates the form
validateForm() {
this.submitted = true;
console.log(this);
console.log(this.formInfo);
if (this.formInfo.invalid) {
return;
}
this.success = true;
}
}
我只想让表单说,如果用户没有,则需要输入一个值。否则,将没有错误消息。
我添加了以下代码,以查看TS文件中是否有值。
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
<!-- I added this -->
<div *ngIf="submitted">
<strong>First Name</strong>
<span>{{ formInfo.controls.firstName.value }}</span>
</div>
似乎该值从未保存到TS中。
最佳答案
如果用户尚未在UI中更改值,则formInfo.controls.firstName.pristine
将为true
。
https://angular.io/api/forms/AbstractControl#pristine
您将要修改
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
成为
<div *ngIf="formInfo.controls.firstName.invalid && formInfo.controls.firstName.errors.required">Your first
name is required.</div>
关于html - HTML表单字段未显示触摸状态-Angular 7,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56027926/