[SOLVED] Getting undefined when submitting form using ngForm

Issue

Apologies if this has already been asked but after searching the web for a long time, I am still unable to find an answer to this. I am new to Angular and Typescripting and maybe it’s a small thing I’m doing wrong but it’s not working for me, so any help will be appreciated. Here is the problem,

I have a modal popup window with 2 inputs in it, when I click on the Save button, using ngForm I am unable to pass the values over to the save method. Here is my code, can you please advise what I’m 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">&times;</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 covered all the code (I’ve taken out in between code to keep question short), one thing to note, inside asset.component.html, I’m trying to pass the values of input field s with IDs assetId and airText
Any help is greatly appreciated, Thank you and looking forward to hearing some good advice.

EDIT:

The undefined I get is as shown in the picture, I’ve updated the code to see what is being selected before I send it over which can be seen in the JSON I’m printing on the form page. Inside saveAsset, I’m creating an alert to show asset.id on the screen.

Solution

Okay so I’ve finally figured out my fault and to be honest it was quite a stupid one, so basically this is what I was doing wrong,
I was sending assetId and **airText **in the form but under saveAsset method, I was trying to print id since asset had id there, so I changed the name field to id and text and now I am getting values to print.

Thank you to all who read and replied in my help.

Answered By – rac3b3nn0n

Answer Checked By – Timothy Miller (BugsFixing Admin)