Ionic 3 Dynamic單選按鈕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>