I have 3 radiobuttons, to sort different data from an API. On each radiobutton, the radiobutton-value disappears, if i press another radio-button, like so: and
. I tried with property binding [value], but that caused an error.
TS:
// Global inputvalues for Radiobuttons
@Input() all: string; image: string; video: string; true: boolean; false: boolean;
// Button-event payload
@Output() mediaButtonSelectionChange: EventEmitter<string> = new EventEmitter<string>();
@Output() licenseButtonSelectionChange: EventEmitter<string> = new EventEmitter<string>();
@Output() verifiedButtinSelectionChange: EventEmitter<string> = new EventEmitter<string>();
sortMedia() {
this.page = 0;
this.hitsArray = [];
this.mediaButtonSelectionChange.emit(this.mediaRadio);
this.mediaType = this.mediaRadio;
this.getStories(this.page, this.hits, this.feed, this.mediaType, this.query, this.verifiedType, this.licenseType, this.startDate, this.endDate);
}
(The sortMedia() function has one for each radiobutton sorting because of the API calls).
HTML:
<div class="container-fluid filter-btn">
<button class="btn btn-sm gay-flame-btn-light filter-btn dropdown-toggle" type="button dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Media type
<span *ngIf="mediaType === 'all'" style="color:red;">(All)</span>
<span *ngIf="mediaType === 'image'" style="color:red;">(Images)</span>
<span *ngIf="mediaType === 'video'" style="color:red;">(Videos)</span>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="radio-group">
<div class="checkbox-forms gay-flame-forms form-group radio">
<label class="form-check-label">
<input type="radio" value='all' [(ngModel)]="mediaRadio" (change)="sortMedia()">
<i aria-hidden="true" [class.active-check]="'all' === 'all'" class="fa fa-circle"></i> All</label>
<label class="form-check-label">
<input type="radio" value="image" [(ngModel)]="mediaRadio" (change)="sortMedia()">
<i aria-hidden="true" class="fa fa-circle"></i> Images</label>
<label class="form-check-label">
<input type="radio" value="video" [(ngModel)]="mediaRadio" (change)="sortMedia()">
<i aria-hidden="true" class="fa fa-circle"></i> Videos</label>
</div>
</div>
</div>
</div>
(also this part has 3 separate parts for each radiobutton).
How do I keep the radiobutton-value on each radiobutton, if another button is pressed?
As provided by @AnteJablan, the solution was just (kinda weird) to add a name attribute to the HTML like so:
<input type="radio" name="verification" value="false" [(ngModel)]="verifiedRadio" (change)="sortVerification()">
Thank you Ante!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.