我正在嘗試從用戶輸入表單中獲取三個選項的值：第一個是選擇選項，它正在作業，第三個是 timepicker，它正在作業，第二個是我不知道的兩個按鈕的單選按鈕組根據選擇的按鈕賦予價值并獲得相同的價值。為了更清楚，我將在這里發布 SS。
這是整個 HTML 表單：
<div class="tab-content">
<div id="home" role="tabpanel" aria-labelledby="home-tab">
<form [formGroup]="eKotlarnica" id="eKotlarnica" (ngSubmit)="onSubmit()">
<div >
<div >
<div >
<select formControlName="lozac">
<option selected disabled>--Изаберите ложача--</option>
<option value="Пера">Пера</option>
<option value="Мика">Мика</option>
<option value="Жика">Жика</option>
</select>
</div>
<div >
<div formControlName="broj" data-toggle="buttons">
<label >
<input type="radio" name="options" id="option1" value="?една лопата">
<img src="/assets/images/1 lopata.png" alt="Angular - 如何從用戶輸入表單中獲取單選按鈕值？" width="50" height="50">
</label>
<label >
<input type="radio" name="options" id="option2" value="Две лопате">
<img src="/assets/images/2 lopate.png" alt="Angular - 如何從用戶輸入表單中獲取單選按鈕值？" width="50" height="50">
</label>
</div>
</div>
<div >
<label for="vremeLozenja">Унесите време ложе?а</label>
<input type="time" id="vremeLozenja" formControlName="vreme">
</div>
<button type="submit">Дода?</button>
</div>
</div>
</form>
這是我在 app.ts 中的位置：忽略過濾器，位于頁面的第二個選項卡下。
@Component({
selector: 'main',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'lozana';
data:any[]= []
filteredData:any[] = []
eKotlarnica = this.formBuilder.group({
lozac: '',
broj: '',
vreme:'',
})
constructor(
private formBuilder: FormBuilder,
) {}
onSubmit(): void {
console.warn('Kotao je nalozen', this.eKotlarnica.value);
this.data.push(this.eKotlarnica.value);
this.filteredData = this.data;
this.eKotlarnica.reset();
}
onChange(event: any ) {
this.filterLozac(event.target.value);
console.log(event.target.value);
}
filterLozac(imeLozaca: any){
this.filteredData = this.data.filter(function(red){
console.log(red);
return imeLozaca == red.lozac;
})
}
}
不知道我該怎么辦，我是新手。
uj5u.com熱心網友回復：
移動formControlName="broj"from<div>元素并放置在單選按鈕控制元件中。您還需要name從單選按鈕中洗掉該屬性。
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-warning">
<input
type="radio"
id="option1"
value="?една лопата"
formControlName="broj"
/>
<img
src="/assets/images/1 lopata.png"
alt="Option 1"
width="50"
height="50"
/>
</label>
<label class="btn btn-warning">
<input
type="radio"
id="option2"
value="Две лопате"
formControlName="broj"
/>
<img
src="/assets/images/2 lopate.png"
alt="Option 2"
width="50"
height="50"
/>
</label>
</div>
演示@StackBlitz
參考
RadioControlValueAccessor
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/531720.html