Ionic 3 Динамический переключатель кнопки проверки формы, если все выбрано, то кнопка включения - PullRequest
Новая
       20

Ionic 3 Динамический переключатель кнопки проверки формы, если все выбрано, то кнопка включения

0 голосов
/ 25 октября 2018

Я пытаюсь проверить динамически сгенерированную группу переключателей, которую пытаюсь проверить, но я не уверен, как проверить, если я добавлю атрибут name, он скажет, что он уже используется, если я использую построитель форм ng-model = "choice"не принимает, не уверен, как проверить остальные выборки, я сделал это, он работает отлично, я буду благодарен, если моя динамическая проверка радио-кнопки решена .. ниже мой код ..

JS 

class player {
    public id: number;
    public name: string;
}

class score {
    public id: number;
    public name: string;
}

classplayer: player[];
section: score[];

playerControl: FormControl;
scoreControl: FormControl;


constructor( public http: Http,private formBuilder: FormBuilder,public navCtrl: NavController, public navParams: NavParams) {

    this.playerControl = formBuilder.control(null, Validators.required);
    this.scoreControl = formBuilder.control(null, Validators.required);

    this.form = formBuilder.group({
        type: this.playerControl,
        class: this.scoreControl 
    });

}

HTML 

<form [formGroup]="form">
    <ion-list>
        <ion-item>
            <ion-label>Name</ion-label>
            <ion-select formControlName="playerControl" (ionChange)="playerChange($event)">
                <ion-option *ngFor="let player of players" [value]="players">{{players.name}}</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
            <ion-label>score</ion-label>
            <ion-select formControlName="scoreControl" (ionChange)="scoreChange($event)">
                <ion-option *ngFor="let score of scores" [value]="score">{{scores.name}}</ion-option>
            </ion-select>
        </ion-item>
        <ion-grid class="table">
            <ion-title class="grey-color">Student List</ion-title>
            <ion-row class="header">
                <ion-col col-6="col-6">
                    <div text-center="text-center">
                        date / field 
                    </div>
                </ion-col>

                <ion-col class="last" col-6="col-6">
                    <div text-center="text-center">
                    Action</div>
                </ion-col>
            </ion-row>
            <ion-row class="rows" *ngFor="let details of details;  let rowIndex = index">
                <ion-col text-center="text-center" col-6="col-6">
                    [
                    {{details.date}}
                    ]<br>
                    {{students.field}}
                </ion-col>
                <ion-col class="rows last" col-6="col-6">
                    <ion-list class="row" no-lines="no-lines" radio-group="radio-group">
                        <ion-item col-4>
                            <ion-radio class="radio true" mode="md" value="true" ></ion-radio>
                        </ion-item>
                        <ion-item col-4>
                                <ion-radio class="radio false" mode="md" value="false"></ion-radio>
                        </ion-item>
                        <ion-item col-4>
                            <ion-radio class="radio " mode="md" value="not sure"></ion-radio>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-list>
    <div padding-left padding-right>
        <button ion-button (click)="submit()" [disabled]="!form.valid">Submit</button>
        <button ion-button (click)="reset()" [disabled]="!countryControl.valid && !portControl.valid" color="light">Reset</button>
    </div>
</form>

1 Ответ

0 голосов
/ 25 октября 2018

Попробуйте это

.ts

Шаг: 1 

import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

Шаг: 2 

this.form = formBuilder.group({
    type: this.playerControl,
    class: this.scoreControl, 
    action: new FormControl(null, Validators.compose([
        Validators.required
        ]))
});

Далее перейдите к вашему_html_file .html

Шаг: 1 

<ion-col class="rows last" col-6="col-6">
    <ion-list class="row" no-lines="no-lines" radio-group="radio-group" formControlName="action">
        <ion-item col-4>
            <ion-radio class="radio true" mode="md" value="true" ></ion-radio>
        </ion-item>
        <ion-item col-4>
                <ion-radio class="radio false" mode="md" value="false"></ion-radio>
        </ion-item>
        <ion-item col-4>
            <ion-radio class="radio " mode="md" value="not sure"></ion-radio>
        </ion-item>
    </ion-list>
</ion-col>
...