I am facing an issue with my Angular4 app where data captured from a form is stored in DynamoDB. The problem arises when an input field typed as 'text' is bound to a Typescript 'number' field, which seems to be converting the object value to a 'string'. Changing the HTML Input type to 'number' is not an ideal solution due to the unwanted increment/decrement decorators on the form field. I am exploring alternative methods to maintain the desired data structure while dealing with this issue.
The structure in my sample.component.ts file is as follows:
export class Course {
Id: number;
Name: string;
}
...
courseInstance: Course;
saveCourse() {
JSON.stringify(this.courseInstance);
}
The code in my sample.component.html file is as follows:
<div>
<label for="courseid">Course ID: </label>
<input type="text" class="form-control"[(ngModel)]="courseInstance.Id" name="courseid">
</div>
<div>
<label for="courseName">Course Name: </label>
<input type="text" class="form-control"[(ngModel)]="courseInstance.Name" name="courseName">
</div>
<div>
<button type="button" class="btn btn-info btn-lg" (click)="saveCourse()">Save</button>
</div>
When using JSON.stringify(this.courseInstance), the output results in something similar to
{"Id":"100","Name":"Test course"}
Where the value 100 is represented as a string. However, when directly creating an instance without using the form, the output of JSON.stringify(courseInstance); is
{"Id":100,"Name":"Test course"}
Attempting to store the object in DynamoDB using PutItem, the Id value fails type check when the data comes from an HTML form.
It is perplexing that Typescript typing does not take precedence over the HTML 'text' input type. I am still exploring possible solutions to address this issue.