javascript - Ionic 3动态单选按钮formBuilder验证如果全部选择则启用按钮

Question

我正在尝试验证动态生成的单选按钮组，但我不确定如何验证是否添加名称属性，如果我使用 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>

Answer 1

试试这个

.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
        ]))
});

接下来，转到 your_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>