Sorry if this question has been asked before, but I've searched extensively online and still can't find a solution. I'm new to Angular and TypeScript and I may be overlooking something simple, but I can't get it to work. Any help would be appreciated. Here's the issue,
I have a modal popup window with two inputs in it. When I click on the Save button, using ngForm, I am unable to pass the values to the save method. Here is my code, could you please advise me on what I might be doing wrong here,
asset.component.html
<ng-template #content let-modal>
<div class="modal-header row d-flex justify-content-between mx-1 mx-sm-3 mb-0 pb-0 border-0">
<h3 class="modal-title" id="modal-basic-title">Add Asset</h3>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true"&litm;×</span>
</button>
</div>
<div class="modal-body">
<form #asset='ngForm' (ngSubmit)="saveAsset(asset.value)">
<div class="form-group">
<h4><label for="assetId" class="form-label text-right" style="margin: 10pt"><b>Asset Name</b></label></h4>
<input id="assetId" name="assetId" class="form-control element-text" list="assetDatalistOptions"
(change)="getAssetValue()" placeholder="Enter Asset Name ... " ngModel>
<datalist id="assetDatalistOptions">
<option *ngFor="let asset of assets" value="{{asset.data_dictionary_entry.text}}">
{{asset.data_dictionary_entry.id}}-{{asset.data_dictionary_entry.text}}
</option>
</datalist>
</div>
<div class="form-group">
<h4><label for="airText" style="margin: 10pt"><b>Asset Information Requirement</b></label></h4>
<div class="input-group">
<input id="airText" name="airText" class="form-control element-text" placeholder="Enter AIR Text ... " ngModel>
</div>
<h4><label for="assetAirContent" style="margin: 10pt"><b>Linked AIR</b></label></h4>
<div class="form=group" *ngFor="let asset of assets">
<ul *ngFor="let air of asset.airs" id="assetAirContent" class="list-group-horizontal-md">
<li *ngIf="asset.data_dictionary_entry.text === selectedAssetText && asset.airs.length>0" class="list-inline element-text">{{air}}</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-info btn-lg">Save</button>
<button type="button" class="btn btn-danger btn-lg" (click)="modal.close('Cancel')">Cancel</button>
</div>
</form>
</div>
</ng-template>
asset.component.ts
assets: Array<Asset> = [];
saveAsset(asset: Asset): void {
console.log("Saving Asset : ",asset);
this.assetService.save(asset)
.subscribe(asset => this.assets.push(asset));
}
asset.ts
export interface Asset {
id: string;
data_dictionary_entry: DataDictionaryEntry
airs: string[];
}
I hope I've included all the pertinent code (I removed some in between to keep the question concise). One thing to note, inside asset.component.html, I'm trying to pass the values of input fields with IDs assetId and airText. Any assistance would be highly valued. Thank you, and I look forward to receiving some valuable advice.
EDIT:
The undefined value I receive can be seen in the image provided. I have updated the code to see what is being selected before I send it over, which can be viewed in the JSON I'm printing on the form page. Within saveAsset, I'm creating an alert to display asset.id on the screen. https://i.stack.imgur.com/fcP6C.png