Getting undefined when submitting form using ngForm

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.