Блог

Я хочу отредактировать текущие данные пользователя, поэтому сначала я пытаюсь записать в консоль отредактированные данные формы, но я получил ошибку

сначала я получил зарегистрированные данные пользователя в форме

 <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)
'''
  

и, пожалуйста, скажите мне, в чем проблема, которую я создал??

Вам нужно добавить formControlName="name" в свой входной тег также проверить, объявлено ли имя в

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

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

Неправильный синтаксис ngModel, поэтому не удается прочитать значение из ng model и определить поле в файле .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);
}
}