下面的代碼通過角度 13 在復選框中成功顯示記錄
這是我的問題以及現在要實作的目標：
我想在表單提交時列印或提醒所有選中的復選框記錄 ID，以逗號分隔
例如。如果我選擇并檢查第一和第二條記錄/語言，我應該能夠提醒他們的 ID，例如100,200
例如。如果我檢查前 3 條記錄，我應該能夠在提交表單時提醒他們的 id 為100,200,300 。
但是當我點擊提交按鈕時，沒有任何警報
這里是 app.component.html
<div >
<h1 >Learners Languages Checkbox </h1>
<div >
<div *ngFor="let lang of langsdata; let i=index;">
<input [(ngModel)]="langsdata[i].checked" type='checkbox' value="{{lang.id}}">{{ lang.id }} {{ lang.lg }}
</div>
<br>
Selected items : {{ selectedlang }}
</div>
<button type="submit" (ngSubmit)="onSubmit()">Submit</button>
</div>
這里是 app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, FormArray} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
langsdata: any = [
{"id":100,"lg": "Nodejs"},
{"id":200,"lg": "PHP"},
{"id":300,"lg": "vuejs"},
{"id":400,"lg": "AngularJS"}
];
languages: [];
selectedlang: "";
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
}
onSubmit(){
// var myFormData = new FormData();
//alert(this.registerForm.value.languages)
this.selectedlang = "";
//print or alert selected language ids eg 100,200,300 based on checkedbox records
alert(this.langsdata);
}
ngOnInit(): void {
}
}
uj5u.com熱心網友回復：
請查看示例：https ://stackblitz.com/edit/angular-formbuilder-v15y3w
我已經在您的語言物件中添加了新鍵，因為您嘗試使用checked它并且它們不存在。喜歡：{ id: 100, lg: 'Nodejs', checked: false }。
然后我只需要引入一個陣列（因為推送到陣列比連接字串更具可讀性），基本上就是這樣：
this.langsdata.forEach((lang) => {
if (lang.checked) {
this.selectedLangs.push(lang.id);
}
});
this.selectedLangsString = this.selectedLangs.toString();
html 中也有一些更改，例如(click)代替(ngSubmit)，但請自己查看并告訴我它是否適合您。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/431277.html
標籤：有角度的