Clash Royale CLAN TAG#URR8PPP

Angular 5: ngModel binding not working

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?

ngModel

ngIf

I am using Angular5. And the Maseemann Components

UPDATE:

I edited the first textfield for testing like this:

<p>
<mdl-textfield type="text" label="Name" [(ngModel)]="assignment.name" (ngModelChange)="log()" floating-label></mdl-textfield>
assignment.name
</p>


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:

<mdl-card mdl-shadow="2" *ngIf="state === 0">
<mdl-card-title>
<h2 mdl-card-title-text>Assignment erstellen</h2>
</mdl-card-title>
<mdl-card-supporting-text>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--7-col">
<p>
<mdl-textfield type="text" label="Name" [(ngModel)]="assignment.name" (ngModelChange)="log()" floating-label></mdl-textfield>
</p>
<p>
<mdl-select [(ngModel)]="assignment.lang" placeholder="Programmiersprache auswählen">
<mdl-option [value]="'c'">C / C++</mdl-option>
<mdl-option [value]="'java'">Java</mdl-option>
<mdl-option [value]="'py'">Python</mdl-option>
<mdl-option [value]="'m'">Matlab</mdl-option>
</mdl-select>
</p>
<p>
<mdl-textfield type="number" label="Punkte" [(ngModel)]="assignment.points_recommended" floating-label></mdl-textfield>
</p>
<p>
<mdl-textfield type="text" label="Executionfilename" [(ngModel)]="assignment.execution_filename" floating-label></mdl-textfield>
</p>
<p>
<mdl-textfield type="text" label="Outputfilenames" [(ngModel)]="assignment.output_files" floating-label></mdl-textfield>
</p>
<div class="mdl-file_upload">
<h6>Evaluationfile:</h6>
<label for="file-upload" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
<span>Datei auswählen</span>
</label>
<mdl-textfield type="text" [(ngModel)]="assignmentFile.name" floating-label disabled></mdl-textfield>
<input type="file" id="file-upload" (change)="onFileSelect($event.target.files)">
</div>
<p>
<mdl-switch [(ngModel)]="assignment.visible_for_others" mdl-ripple>Öffentlich</mdl-switch>
</p>
<p>
<mdl-switch [(ngModel)]="assignment.text_editor_available" mdl-ripple>Online-Texteditor</mdl-switch>
</p>
</div>
<div class="mdl-cell mdl-cell--5-col">
<h6>Beschreibung</h6>
<p>...</p>
</div>
</div>
</mdl-card-supporting-text>
<mdl-card-actions mdl-card-border>
<button (click)="submitAssignment()" mdl-button mdl-colored mdl-ripple mdl-colored="primary">Nächster Schritt</button>
</mdl-card-actions>
</mdl-card>


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



ngIf

ngIf

1 Answer
1

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

<span #assignment>..

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.