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>

Ionic 3 Dynamic单选按钮formBuilder验证（如果全部选中则启用按钮）

1 个答案: