У меня есть три флажка и один вход.Дополнительно у меня есть один formsArray и одна formGroup.Я хотел бы проверить флажки таким образом, чтобы:
- Одновременно можно было проверить только один флажок.
- Ввод отключается после того, как этот флажок был установлен.
- Два других флажка отключены, пока установлен один.
Теперь я работал с angular раньше.Но модуль реактивных форм очень сложен в освоении, так что такие мелкие объекты, как эта, так сложно понять - угловой путь.
Я попытался получить значения formsArray из valueChanges и передать его впользовательский метод, который проверяет наличие одного истинного значения в этом массиве, а затем блокирует ввод.Но это грязно и не угловато.
Я хотел бы иметь возможность звонить
formGroup.get('checkBoxValues').valid
на моем входе, делать вещи угловым путем.
searchForm: FormGroup;
artist: FormControl = new FormControl({value: false, disabled:
false});
track = new FormControl({value: false, disabled: false});
album = new FormControl({value: false, disabled: false});
searchInput: FormControl;
formArray: FormArray;
lockInput: boolean = true;
constructor(private searchService: SearchService, private _fb:
FormBuilder) {
this.formArray = new FormArray([
this.artist,
this.track,
this.album
]);
this.searchForm = _fb.group({
checkboxValues: this.formArray,
searchInput: null
});
}
ngOnInit() {
(<FormArray>this.searchForm.get('checkboxValues')).valueChanges.subscr ibe(
res => this.validateCheckboxes(res)
);
validateCheckboxes(controls) : void {
const lock = controls.find(el => {
return !el;
});
return this.lockInput = lock;
}
<mat-checkbox class="example-margin" [formControl]="artist">Artist</mat-checkbox>
<mat-checkbox class="example-margin" [formControl]="album">Album</mat-checkbox>
<mat-checkbox class="example-margin" [formControl]="track">Track</mat-checkbox>
<mat-form-field class="example-full-width">
<input matInput placeholder="Type album, artist or track..." type="text" [disabled]="lockInput" [matAutocomplete]="auto">
</mat-form-field>
Ввод должен быть отключен, пока не установлен один флажок.После того, как один проверяется, вход должен быть включен.Если флажок снят снова, ввод должен снова отключиться, небольшая, но богатая функция.
Я хочу использовать всю мощь модуля реактивных форм и держать все в порядке.
Пожалуйста, помогите!