Angular 已分配表单验证器输入但 return 错误
Angular Form Validator input assigned but return error
在我的注册组件中,我创建了一个用于验证输入字段的表单组。
this.UserForm = new FormGroup({
name: new FormControl('', Validators.required),
surname: new FormControl('', Validators.required),
username: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9._-]+$')
])),
etc...
})
所以我有输入及其控制
<mat-form-field>
<mat-label>Name</mat-label>
<input #name matInput type="text" [value]="userData.name" formControlName="name"
(change)="onChangeName(name.value)" required>
<mat-error *ngFor="let validation of account_validation_messages.name">
<mat-error class="error-message"
*ngIf="newUserForm.get('nameUser').hasError(validation.type)
&& (newUserForm.get('nameUser').dirty || newUserForm.get('nameUser').touched)">
{{validation.message}}</mat-error>
</mat-error>
</mat-form-field>
<mat-form-field>
并且有效...但是...如果我使用相同的组件进行用户更新,它会用
填充输入
[value]="userData.name"
如果我“触摸”它...它给我错误,好像它是空的...但它不是...
我该如何解决这个错误???
在使用响应式表单时,您应该使用 newUserForm.get('nameUser').setValue( … )
而不是 [value]="…"
。
在我的注册组件中,我创建了一个用于验证输入字段的表单组。
this.UserForm = new FormGroup({
name: new FormControl('', Validators.required),
surname: new FormControl('', Validators.required),
username: new FormControl('', Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9._-]+$')
])),
etc...
})
所以我有输入及其控制
<mat-form-field>
<mat-label>Name</mat-label>
<input #name matInput type="text" [value]="userData.name" formControlName="name"
(change)="onChangeName(name.value)" required>
<mat-error *ngFor="let validation of account_validation_messages.name">
<mat-error class="error-message"
*ngIf="newUserForm.get('nameUser').hasError(validation.type)
&& (newUserForm.get('nameUser').dirty || newUserForm.get('nameUser').touched)">
{{validation.message}}</mat-error>
</mat-error>
</mat-form-field>
<mat-form-field>
并且有效...但是...如果我使用相同的组件进行用户更新,它会用
填充输入[value]="userData.name"
如果我“触摸”它...它给我错误,好像它是空的...但它不是...
我该如何解决这个错误???
在使用响应式表单时,您应该使用 newUserForm.get('nameUser').setValue( … )
而不是 [value]="…"
。