使用 ngForm 提交表单时未定义

Question

很抱歉，如果有人问过这个问题，但在网上搜索了很长时间后，我仍然找不到答案。我是 Angular 和 Typescripting 的新手，也许这是我做错的一件小事，但它对我不起作用，因此我们将不胜感激。问题来了，

我有一个模态弹出窗口 window，里面有 2 个输入，当我使用 ngForm 单击“保存”按钮时，我无法将值传递给保存方法。这是我的代码，你能告诉我这里做错了什么吗，

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[];
}

我希望我已经涵盖了所有代码（我已经在代码之间删除以保持问题简短），需要注意的一件事是 asset.component.html ，我正在尝试传递 ID 为 assetId 和 airText 的输入字段 s 的值非常感谢任何帮助，谢谢并期待听到一些好的建议。

编辑：

我得到的undefined如图所示，我已经更新了代码，看看在发送之前选择了什么，可以在JSON 我正在表单页面上打印。在 saveAsset 中，我正在创建一个警报以在屏幕上显示 asset.id。

Answer 1

对于 re-produced 问题（例如 stackblitz），我实际上可以测试该问题，但我怀疑 <form> 上的 (ngSubmit)="saveAsset(asset.value)" 没有被触发？ saveAsset() 当前是否被调用？无论哪种方式，我都将其重构为 Save 按钮。

 <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'>
            <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" (click)="saveAsset(asset.value)" type="button">Save</button>
                <button type="button" class="btn btn-danger btn-lg" (click)="modal.close('Cancel')">Cancel</button>
            </div>
        </form>
    </div>

Answer 2

好吧，我终于找到了我的错，老实说，这是一个愚蠢的错误，所以基本上这就是我做错的地方，我在表单中发送 assetId 和 **airText ** 但在 saveAsset 方法下，我试图打印 id 因为资产在那里有 id，所以我将名称字段更改为 id 和 text 现在我正在获取要打印的值。

感谢所有阅读和回复我帮助的人。

使用 ngForm 提交表单时未定义

Getting undefined when submitting form using ngForm

typescript

angular

bootstrap-5