Question

我想编辑当前用户的详细信息，所以首先我尝试控制台日志编辑的表单数据，但是出现错误

首先，我将当前的用户数据登录到表单中

<div *ngIf="auth.user | async; then nAuthenticated else guest">
</div>

<ng-template #nAuthenticated>
<div class="container emp-profile">
    <div *ngIf="auth.user | async as user">
        <form #f="ngForm" (ngSubmit)="nannySubmit(f)">
            <div class="col-md-6">
                <label>Name</label>
            </div>
            <div class="col-md-6">
                <mat-form-field>
                  <input  type="text" ngModel name="name" 
                 #nameInput="ngModel" matInput placeholder= {{user.name}}>
                </mat-form-field>
             </div>
             <button type="submit" mat-raised-button color="primary" 
             [disabled]  ="f.invalid">Save Data</button>
        </form>
    </div>
</div>
</ng-template>

尝试使用以下代码访问输入字段的值

export class EditProfilesComponent implements OnInit {
nanny: Nanny;
constructor(public auth: PauthService) { }

ngOnInit() {
}

nannySubmit(form: NgForm) {
    if (form.value.name != null) {
      this.nanny.name = form.value.name;
    }
console.log(this.nanny.name);
}
}

但是点击提交按钮后，控制台出现错误

'''

EditProfilesComponent.html:41 ERROR TypeError: Cannot set property 'name' of undefined
    at EditProfilesComponent.push../src/app/interface/edit-profiles/edit-profiles.component.ts.EditProfilesComponent.nannySubmit (edit-profiles.component.ts:31)
    at Object.eval [as handleEvent] (EditProfilesComponent.html:41)
    at handleEvent (core.js:23008)
    at callWithDebugContext (core.js:24078)
    at Object.debugHandleEvent [as handleEvent] (core.js:23805)
    at dispatchEvent (core.js:20457)
    at core.js:21947
    at SafeSubscriber.schedulerFn [as _next] (core.js:13516)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
'''

，请告诉我我创建的问题是什么？

Answer 1

您需要在输入标签中添加formControlName="name"并检查

中是否声明了名称

 this.ngForm= this.formBuilder.group({
            name: ['', Validators.required]
})

<input  type="text" formControlName="name" ngModel name="name" />

Answer 2

ngModel语法错误，因此无法从ng模型中读取值并无法在.ts文件中定义字段

<ng-template #nAuthenticated>
<div class="container emp-profile">
    <div *ngIf="auth.user | async as user">
        <form #f="ngForm" (ngSubmit)="nannySubmit()">
            <div class="col-md-6">
                <label>Name</label>
            </div>
            <div class="col-md-6">
                <mat-form-field>
                  <input  type="text" [(ngModel)]="name" 
                 #nameInput="ngModel" matInput placeholder= {{user.name}}>
                </mat-form-field>
             </div>
             <button type="submit" mat-raised-button color="primary" 
             [disabled]  ="f.invalid">Save Data</button>
        </form>
    </div>
</div>
</ng-template>

在Component.ts

export class EditProfilesComponent implements OnInit {
nanny:any
name:any
constructor(public auth: PauthService) { }

ngOnInit() {
}

nannySubmit() {
    if (this.name != null) {
      this.nanny.name = this.name;
    }
console.log(this.nanny.name);
}
}

如何访问角度ngForm数据

2 个答案: