Как проверить угловые материалы флажками угловым способом? - PullRequest
0 голосов
/ 10 июля 2019

У меня есть три флажка и один вход.Дополнительно у меня есть один formsArray и одна formGroup.Я хотел бы проверить флажки таким образом, чтобы:

  1. Одновременно можно было проверить только один флажок.
  2. Ввод отключается после того, как этот флажок был установлен.
  3. Два других флажка отключены, пока установлен один.

Теперь я работал с 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>

Ввод должен быть отключен, пока не установлен один флажок.После того, как один проверяется, вход должен быть включен.Если флажок снят снова, ввод должен снова отключиться, небольшая, но богатая функция.

Я хочу использовать всю мощь модуля реактивных форм и держать все в порядке.

Пожалуйста, помогите!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...