Ich habe ein Problem eine Checkbox zu machen in einer dynamischen Form arbeitet Angular mit 4.Wie man eine Checkbox in einem Augular dynamischen Formular verwaltet?
auf Firefox, wenn Sie das Kontrollkästchen Überprüfung der Wert I erhalten ist 'on' anstelle von true. Und wenn es deaktiviert wird, ist der Wert immer noch vorhanden und nicht auf false oder '' eingestellt.
Auf Chrom, ist es gar nicht zu funktionieren scheint ...
Ich habe ein Beispiel basiert auf dem Angular dynamic form tutorial erstellt.
Ich habe eine neue Datei mit dem Namen question-checkbox.ts hinzugefügt eine Checkbox zu verwalten:
import { QuestionBase } from './question-base';
export class CheckboxQuestion extends QuestionBase<boolean> {
controlType = 'checkbox';
type: string;
constructor(options: {} = {}) {
super(options);
this.type = 'checkbox';
}
}
Dann habe ich die dynamic-form-question.component.html aktualisiert, um diese neue Art zu verwenden:
<div [formGroup]="form">
<label [attr.for]="question.key">{{question.label}}</label>
<div [ngSwitch]="question.controlType">
<select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key">
<option *ngFor="let opt of question.options" [value]="opt.key">{{opt.value}}</option>
</select>
<input *ngSwitchDefault [formControlName]="question.key" [id]="question.key" [type]="question.type" />
</div>
<div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>
</div>
Und ich habe die aktualisierte Datensatz in question.service.ts:
import { Injectable } from '@angular/core';
import { DropdownQuestion } from './question-dropdown';
import { QuestionBase } from './question-base';
import { TextboxQuestion } from './question-textbox';
import { CheckboxQuestion } from './question-checkbox';
@Injectable()
export class QuestionService {
getQuestions() {
let questions: QuestionBase<any>[] = [
new DropdownQuestion({
key: 'brave',
label: 'Bravery Rating',
options: [
{ key: 'solid', value: 'Solid' },
{ key: 'great', value: 'Great' },
{ key: 'good', value: 'Good' },
{ key: 'unproven', value: 'Unproven' }
],
order: 3
}),
new TextboxQuestion({
key: 'firstName',
label: 'First name',
value: 'Bombasto',
required: true,
order: 1
}),
new TextboxQuestion({
key: 'emailAddress',
label: 'Email',
type: 'email',
order: 2
}),
new CheckboxQuestion({
key: 'sideksick',
label: 'Sidekick',
order: 3
})
];
return questions.sort((a, b) => a.order - b.order);
}
}
Schließlich habe ich auf datiert die dynamic-form.component.html den aktuellen Stand der Form angezeigt werden:
<div>
<form [formGroup]="form">
<div *ngFor="let question of questions" class="form-row">
<df-question [question]="question" [form]="form"></df-question>
</div>
</form>
<p><strong>Current state</strong><br>{{form.value | json}}</p>
</div>
So meine Frage wäre: Wie sollte ich in der Lage zu tun sein Kontrollkästchen innerhalb eines Winkel 4 dynamische Form zu verwenden, und in der Lage sein, um einen korrekten Wert zu erhalten?
Warum ich ein dynamisches Formular verwenden muss, liegt daran, dass ich mein Formular basierend auf einem JSON erzeuge, das von einem externen Dienst stammt und es beschreibt.