Question

我有3个复选框和1个输入。另外，我有一个formsArray和一个formGroup。我想验证复选框，以便：

一次只能选中一个复选框。
选中该复选框后，输入将被禁用。
在选中一个复选框的同时，其他两个复选框也被禁用。

现在，我以前使用过angular。但是反应形式模块很难掌握，因此像这样的小功能很难弄清楚-角度方式。

我试图从valueChanges获取formsArray值，并将其传递给自定义方法，该方法检查该数组中是否存在一个真值，然后锁定输入。但这是混乱且非棱角的。

我希望能够致电

    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>

应禁用输入，直到选中一个复选框。一经检查，应启用输入。如果再次取消选中它，则输入应再次禁用，虽然小但功能丰富。

我想利用反应式表单模块的功能并保持紧密。

请帮助！

如何通过角度方式验证角度材料复选框？

0 个答案: