ngModel 两种方式绑定在 Angular 中不起作用

Question

<input matInput placeholder="username" [(ngModel)]="userId">
<input matInput placeholder="name" [(ngModel)]="name">

I have also imported the FormsModule

import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    UserInputComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})

export class UserInputComponent implements OnInit {

 userId: string = 'userId';
 name: string = 'name';
  constructor() { }

  ngOnInit(): void {
  }

  
  }
}

The initial values are getting printed in the console but when a new value is entered, the variables userId and name don't get updated. if I don't give an initial value to userId and name then printing them on the console gives me undefined even after entering them from the input. Kindly help me figure out what's the issue.

EDIT The problem was fixed by including a name attribute in the input tag.

Answer 1

Your are not posted full code. But anyhow I add button and click event. Now when you click you need to update model then it will update values. Currently you assigned first time but when click your not assign new value to inputs

<input matInput placeholder="username" [(ngModel)]="userId">
    <input matInput placeholder="name" [(ngModel)]="name">
    <button (click)="test(event)" value="click"/>



import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})

export class UserInputComponent implements OnInit {

 userId: string = 'userId';
 name: string = 'name';
  constructor() { }

  ngOnInit(): void {
  }

test(e){
userId=e.target.value;
name=e.target.value;
}

  
  }
}