如何以反应形式存储布尔值？

Question

I want to store booleans in a reactive form where a button has the value true or false. So that I can access the inputs of these buttons. The problem is as well that I have another form in this page, for text inputs. So I don't really know if I can use the form twice.

<ion-form  [formGroup]="form" (ngSubmit)="takeBools()">
    <ion-grid>
    <ion-row>
    <ion-col>
        <ion-button  class="button1" (click)="onLoc()" shape="round" [color]="local ? 'light' : 'grey'"> <ion-icon name="pin"></ion-icon> </ion-button>
    <ion-col>
    <ion-row>
    <ion-grid>
</ion-form>

<form [formGroup]="form" (ngSubmit)="addTag()">
    <ion-item>
      <ion-input formControlName="tag" clearInput="true" placeholder="Tags" name="tagValue"></ion-input>
      <ion-button item-right type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>
  </form>

page.ts

  form: FormGroup;
    public local: boolean = true;
    ...



addTag() { // properly access and reset reactive form values
      const tagCtrl = this.form.get('tag');
      if (tagCtrl.value) {
        this.tagList.push(tagCtrl.value);
        this.tagInput = ''; // in order to have an empty input
      }
    }

        takeBools() {
          const local: boolean = this.form.controls['local'].value;
          console.log(this.local);
        }

      ngOnInit() {
     this.form = new FormGroup({
      tag: new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.required, Validators.maxLength(20), Validators.minLength(1)]
      }),
      local: new FormControl(true, {    // these bools are not accesable yet
        updateOn: 'submit',
      }),
        })

Answer 1

I think what you're trying to do is to pull the value of local out of the FormGroup .

You can do that with the following code.

const local: boolean = this.form.controls[‘local’].value;