Angular 5: ngModel binding not working

Question

I am very sure that I am using the ngModel correctly, but my model will not be updated when the textfield changes. I have used this constellation several times in my app without any problems. I have been sitting on it for a while now and do not see my mistake, maybe a second pair of eyes will help. Could it be that the ngIf influences the binding?

I am using Angular5. And the Maseemann Components

UPDATE:

I edited the first textfield for testing like this:


  
  {{assignment.name}}

And it is working as expected, the input is shown directly. I have check several times for spelling but didn't find any error.

My template:


  
    Assignment erstellen
  
  
    
      
        
          
        
        
          
            C / C++
            Java
            Python
            Matlab
          
        
        
          
        
        
          
        
        
          
        
        
          Evaluationfile:
          
            Datei auswählen
          
          
          
        
        
          Öffentlich
        
        
          Online-Texteditor
        
      
      
        Beschreibung
        ...

My controller:

export class AssignmentNewComponent implements OnInit {
  public state: number = 0;
  public assignment: Assignment = new Assignment(null, this.authService.getAccountId());
  public assignmentFile: File = new File([''], 'Datei auswählen');

  constructor(
    private authService: AuthService,
    private assignmentService: AssignmentService,
  ) { }

  ngOnInit() {
    this.testcases.push(new AssignmentTestCase());
  }

  onFileSelect(files: FileList): void {
    this.assignmentFile = files[0];
  }

  setState(state: number): void {
    this.state = state;
  }

  submitAssignment(): void {
    Object.keys(this.assignment).forEach(
      key => console.log(key, this.assignment[key])
    )
  }


  next(): void {
    this.state++;
  }

  previous(): void {
    this.state--;
  }

  log(){
    console.log(this.assignment);
  }

}

My model:

export class Assignment {
    public id: number;
    public admin: number;
    public name: string;
    public lang: string;
    public points_recommended: number;
    public execution_filename: string;
    public output_files: string;
    public evaluation_file: string;
    public visible_for_others: boolean;
    public text_editor_available: boolean;
    public created_at: string;
    public updated_at: string;

    constructor(
        id?: number,
        admin?: number,
        name?: string,
        lang?: string,
        points_recommended?: number,
        execution_filename?: string,
        output_files?: string,
        evaluation_file?: string,
        visible_for_others?: boolean,
        text_editor_available?: boolean,
        created_at?: string,
        updated_at?: string,
    ){
        this.id = id || undefined;
        this.admin = admin || undefined;
        this.name = name || undefined;
        this.lang = lang || undefined;
        this.points_recommended = points_recommended || undefined;
        this.execution_filename = execution_filename || undefined;
        this.output_files = output_files || undefined;
        this.evaluation_file = evaluation_file || undefined;
        this.visible_for_others = visible_for_others || undefined;
        this.text_editor_available = text_editor_available || undefined;
        this.created_at = created_at || undefined;
        this.updated_at = updated_at || undefined;
    }
}

Max · Accepted Answer

The problem was really easy to fix. I had an angular ID .. which newly bound my assignment variable to this assignment. Just a naming problem. I renamed the id now it is working as expected.

Angular 5: ngModel binding not working

Answers (1)

Related Questions