Angular список Wi-Fi и пароль в качестве formGroup в Material Stepper - PullRequest
Новая
       25

Angular список Wi-Fi и пароль в качестве formGroup в Material Stepper

0 голосов
/ 04 апреля 2020

Я пытаюсь собрать мат-степпер для подключения к вайфай.
В настоящее время это выглядит так:

*

Это только материальный степпер с кнопкой для каждого имени WiFi ( ssid ) вместо поля ввода.
Я хочу, чтобы пользователь нажал одну из кнопок и перешел к следующему шагу ( пароль ).
Чтобы пользователь не пропустил первый шаг нажатием на «Пароль» в заголовке, я установил шагер lineal ( Должна ли проверяться действительность предыдущих шагов или нет. ) атрибут true .

Мой pproach:
Чтобы заполнить форму и проверить ее, я написал метод onSubmitSsid (wiFi.SSID) , который заполняет значение поле невидимой формы с SSID нажатой кнопки, чтобы проверить это поле. Каждая кнопка имеет также matStepperNext , чтобы затем перейти к следующему шагу, если форма действительна.

Проблема:
Поле формы заполняется правильным значением, как показано на рисунке выше, но оно постоянно недействительно, поэтому я не могу получить доступ к следующему шагу. Может быть, я неправильно понял поведение angular форм или, может быть, есть более подходящие решения для создания степпера с кнопками вместо входов (что выглядит хорошо для моих глаз. Каково ваше мнение?). Если я щелкну в поле формы и напишу в нем, форма станет действительной, и я смогу перейти к следующему шагу.

Вот как выглядит HTML (я только вставил первый шаг. Второй в основном такой же, как в примере Material Stepper): 

    <mat-step [stepControl]="firstFormGroup">
      <form [formGroup]="firstFormGroup">
        <ng-template matStepLabel>WiFi</ng-template>
        <mat-list role="list">
            <mat-list-item *ngFor="let wiFi of wiFiList" role="listitem">

                <!-- The wifi's as buttons; Maybe not the best idea? -->
                <button (click)="onSubmitSsid(wiFi.SSID)" type="submit" mat-button matStepperNext>
                  <mat-icon mat-list-icon>wifi</mat-icon>{{wiFi.SSID}}
                </button>

                <mat-divider></mat-divider>
            </mat-list-item>
        </mat-list>

        <!-- The input for form validation -->
        <mat-form-field>
          <input [value]="ssid" matInput formControlName="firstCtrl" required>
        </mat-form-field>

        <br>
        <div>
          <button mat-raised-button><mat-icon>find_replace</mat-icon>Rescan</button>
        </div>
      </form>
    </mat-step>

Мой машинописный код: 

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { GetService } from 'src/app/core/services/get/get.service';
import { WiFiModel } from '../../../shared/models/wifi-list.model';

@Component({
  selector: 'app-wifi-wizzard',
  templateUrl: './wifi-wizzard.component.html',
  styleUrls: ['./wifi-wizzard.component.scss']
})
export class WifiWizzardComponent implements OnInit {

  public firstFormGroup: FormGroup;
  public secondFormGroup: FormGroup;
  public wiFiList: WiFiModel[] = [];
  public ssid: string;

  constructor(private _formBuilder: FormBuilder, private GetService: GetService) {}

  async ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
        firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
    // get the WiFi data 
    this.wiFiList = await this.GetService.getWifi().toPromise();
  }
  // filling the form on button click
  public onSubmitSsid(SSID: string) {
    this.ssid = SSID;
  }
}


Спасибо за любые подходы, идеи и помощь.

...