gpt4 book ai didi

javascript - 在 angular2 中渲染 formControlName 时未定义 formcontrolname

转载 作者:行者123 更新时间:2023-12-01 03:58:47 26 4
gpt4 key购买 nike

我正在尝试来自官方 Angular 响应式(Reactive)表单验证 doc 。我在渲染 formControlName 时遇到问题。它给出了用户名未定义的错误这里有一个错误

Error: Uncaught (in promise): Error: Error in ./UserAddComponent class UserAddComponent - inline template:8:15 caused by: Cannot read property 'username' of undefined
Error: Error in ./UserAddComponent class UserAddComponent - inline template:8:15 caused by: Cannot read property 'username' of undefined
at ViewWrappedError.ZoneAwareError (zone.js:958)
at ViewWrappedError.BaseError [as constructor] (errors.js:22)
at ViewWrappedError.WrappedError [as constructor] (errors.js:87)
at new ViewWrappedError (errors.js:77)
at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (view.js:650)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:623)
at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:410)
at CompiledTemplate.proxyViewClass.View_UserAddComponent_Host0.detectChangesInternal (/AppModule/UserAddComponent/host.ngfactory.js:29)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:425)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:620)
at ViewRef_.detectChanges (view_ref.js:170)
at RouterOutlet.activate (router_outlet.js:156)
at ActivateRoutes.placeComponentIntoOutlet (router.js:1318)
at ActivateRoutes.activateRoutes (router.js:1285)
at router.js:1221
at resolvePromise (zone.js:643) [angular]
at resolvePromise (zone.js:619) [angular]
at :4200/vendor.bundle.js:138417:17 [angular]
at Object.onInvokeTask (ng_zone.js:264) [angular]
at ZoneDelegate.invokeTask (zone.js:362) [angular]
at Zone.runTask (zone.js:166) [<root> => angular]
at drainMicroTaskQueue (zone.js:529) [<root>]
at HTMLAnchorElement.ZoneTask.invoke (zone.js:420) [<root>]

我按照步骤操作,还检查了 angular2 中的 plucker。它运行良好,但在我的项目中,它给了我一个错误

         buildForm(): void {

this.userAddForm = this.fb.group(
{
username: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]],

password: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]],
passwordConfirm: ['', [Validators.minLength(8), Validators.maxLength(25), Validators.required]],

userRole: ['', [Validators.required]],
locationCode: ['', [Validators.required]]
},
{ Validators: matchingPasswordsValidators('password', 'confirmPassword') }

);
this.active = false;

this.userAddForm.valueChanges
.subscribe(data => this.onValueChanged(data));


this.onValueChanged();
}
onValueChanged(data?: any) {
if (!this.userAddForm) { return; }
const form = this.userAddForm;

for (const field in this.userAddErrors) {
// clear previous error message (if any)
this.userAddErrors[field] = '';
const control = form.get(field);

if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.userAddErrors[field] += messages[key] + ' ';
}
}
}
}
userAddErrors: {
username: "",
password: "",
passwordConfirm: "",
userRole: "",
locationCode: ""
}
validationMessages = {
'username': {
'required': 'username is required.',
'minlength': 'username must be at least 8 characters long.',
'maxlength': 'username cannot be more than 24 characters long.'
},
'password': {
'required': 'password is required.',
'minlength': 'password must be at least 8 characters long.',
'maxlength': 'password cannot be more than 24 characters long.'
},
'passwordConfirm': {
'required': 'Confirm Password is required.',
},
'userRole': {
'required': 'User Role is required.',
},
'locationCode': {
'required': 'Location is required'
}
};

在我的 html 中,我已经根据文档完成了

<form name="form" class="form-horizontal" method="POST"
(ngSubmit)="addNewUser()" [formGroup]="userAddForm">
<div class="box-body">
<div class="form-group required">
<label class="control-label col-md-4 requiredField"> Username<span class="asteriskField">*</span> </label>
<div class="controls col-md-8 ">
<input class="input-md textinput textInput form-control" formControlName="username" placeholder="Choose your username" required/>
<div *ngIf="userAddErrors.username" class="alert alert-danger">
{{ userAddErrors.username }}</div>
</div>
</form>

我在我的应用程序模块中添加了 reactieappmodule 并注入(inject)了 formbuilder。

最佳答案

看起来错误是由 userAddErrors.username 引起的。

使用=而不是:。后者指定对象的类型而不是设置值。

   userAddErrors= {
username: "",
password: "",
passwordConfirm: "",
userRole: "",
locationCode: ""
}

关于javascript - 在 angular2 中渲染 formControlName 时未定义 formcontrolname,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42382325/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com