Я м, используя флажок в угловой, чтобы выбрать более одного сведения и им пытаются получить значение флажка на форме "отправить".Вместо того, чтобы получить значение я получаю значение как true.Я пробовал следующий код, помогите мне спасибо заранее
export class CreatesessionComponent implements OnInit {
form : FormGroup ;
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.form = this.formBuilder.group({
useremail : new FormArray([
new FormControl('',Validators.required)
])
});
}
}
userdata-это динамический массив, который я получу из базы данных
<div class = "row" formArrayName="useremail; let k = index">
<div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
<div *ngFor="let data of userdata">
<div class="col-md-6">
<input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
</div>
</div>
</div>
</div>
Поскольку у вас есть несколько значений, которые вы хотите использовать, вы должны использовать FormArray
, с FormControl
может фиксировать только одно значение.
в
Начните с объявлением пустой formArray:
this.myForm = this.fb.group({
useremail: this.fb.array([])
});
Перебирать ваши письма, и следить за изменением событий и пройти соответствующее письмо и событие в метод onChange, после
где вы проверить, если это'ы проверено
, затем добавить соответствующее письмо formarray, если это'ы не остановить, удалить выбранные письма из формы выбора:
в
<div *ngFor="let data of emails">
<input type="checkbox" (change)="onChange(data.email, $event.target.checked)"> {{data.email}}<br>
</div>
И onChange, после
:
в
onChange(email:string, isChecked: boolean) {
const emailFormArray = <FormArray>this.myForm.controls.useremail;
if(isChecked) {
emailFormArray.push(new FormControl(email));
} else {
let index = emailFormArray.controls.findIndex(x => x.value == email)
emailFormArray.removeAt(index);
}
}
Проблема с @AJT_82 ответ заключается в том, что если вы хотите изменить модель, используя форма.сброс() или или форма.patchValue(), он выиграл'т работу. Для решения этих проблем необходимо реализовать ControlValueAccessor интерфейс. В принципе нужно создать 2 компонента: компонент группы, который держит модель стоимости и реализует ControlValueAccessor и компонента checkbox, фактический флажок. Я написал запись в блоге с подробным объяснением, а также создали plunker, которые демонстрируют некоторые примеры.
Конечного использования:
<checkbox-group [(ngModel)]="selectedItems">
<checkbox value="item1">Item 1</checkbox>
<checkbox value="item2">Item 2</checkbox>
<checkbox value="item3">Item 3</checkbox>
<checkbox value="item4">Item 4</checkbox>
</checkbox-group>
Реализация компонента группы:
@Component({
selector: 'checkbox-group',
template: `<ng-content></ng-content>`,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxGroupComponent),
multi: true
}]
})
export class CheckboxGroupComponent implements ControlValueAccessor {
private _model: any;
// here goes implementation of ControlValueAccessor
...
addOrRemove(value: any) {
if (this.contains(value)) {
this.remove(value);
} else {
this.add(value);
}
}
contains(value: any): boolean {
if (this._model instanceof Array) {
return this._model.indexOf(value) > -1;
} else if (!!this._model) {
return this._model === value;
}
return false;
}
// implementation for add and remove
...
}
Компонент checkbox:
@Component({
selector: 'checkbox',
template: `
<div (click)="toggleCheck()">
<input type="checkbox" [checked]="isChecked()" />
<ng-content></ng-content>
</div>`
})
export class CheckboxComponent {
@Input() value: any;
constructor(@Host() private checkboxGroup: CheckboxGroupComponent) {
}
toggleCheck() {
this.checkboxGroup.addOrRemove(this.value);
}
isChecked() {
return this.checkboxGroup.contains(this.value);
}
}
Элементы управления checkbox ребенка есть ссылка на группы компонент (@хост() декоратор). Когда флажок нажал toggleCheck() вызов addOrRemove() метод групповой компонент и если флажок's стоимостью уже в модели, он удаляется, в противном случае она добавляется в модель.
Вы можете сделать такие проверенные данные:
<input .... (change)="onChange(data)" />
onChange(data){
data.checked = !data.checked;
}
чтобы получить все проверил значение
let checkedValues = userdata.filter(x => x.checked).map(x => x.email);
Я сделал эту функцию на ввод по форме нагрузки автоматический выбор:
[проверено]="эта.выбранный? это.выбран.тип.включает(тип) : ложь и"
Полный код:
<label *ngFor="let type of this.entityType" class="checkbox-inline c-checkbox">
<input type="checkbox" [checked]="this.selected? this.selected.type.includes(type) : false" (change)="onChangeEntityType(type, $event.target.checked)"/>
<span class="fa fa-check"></span>{{type | translate}}</label>
Где
это.выбранный
мой объект и
это.выбран.тип.включает(тип)
авто проверяем если галочки будут проверены.
У меня решена двумя различными способами Одна с простой массив флажок - мат-флажок а другой с мат-отбор-список.
Суть кода в пост. По стоимости можно установить всевозможные комбинации. В моем случае я'вэ используется concatination ID и описание для того, чтобы инициализировать форма контроля в конце из одного источника..
Моя проблема была с очисткой массива checkbox в более простой пример.. Нет времени для отходов .. вдоль следующей задачи.. :)