如何使用角度2打字稿禁用按钮是否选择了单选按钮

时间:2018-01-15 05:45:25

标签: html angular typescript

click here to see screenshot

我需要禁用按钮是否使用角度2打字稿选择单选按钮。我的申请中有两个步骤

步骤1:选择国家/地区和用户名后,用户将被重定向到

步骤2:将会有一个单选按钮列表(取决于用户在OKta中是否有任何参与方ID)。如果用户在步骤2中选择一个单选按钮并单击取消按钮,则页面重定向步骤1.

现在,用户继续执行步骤2,由于之前的选择,该按钮未被禁用。我写了按钮[已禁用],但仍然没有工作。

  <form #addAccountForm="ngForm" (ngSubmit)="selectParty()" autocomplete="off" [formGroup]="partySelectForm">
                <p i18n>Select the name of the member you wish to associate with this ConnectID.</p>
                <div class="party"
                     *ngFor="let party of (parties | async); let i = index;"
                     [ngClass]="{'connected': party.alreadyConnected}">
                        <span class="party__name_container">
                            <input id="party{{i}}" type="radio"
                                   formControlName="partyId"
                                   [(ngModel)]="selectedParty"
                                   [value]="party"
                                   [attr.disabled]="party.alreadyConnected === true || null"
                                   [attr.selected]="partyCount === 1">
                            <label for="party{{i}}">{{party}}</label>
                        </span>
                    <span *ngIf="party.alreadyConnected" class="party--is-connected"><em>Connected</em></span>
                </div>
                <p class="TAL paddingtop1x" i18n>If this list of members appears incorrect or the name you wish to select is already connected, please contact your local Customer Service representative.</p>
                <button class="pull-right btn btn-primary btn-block margintop2x" type="submit" [disabled]="partySelectForm.controls['partyId'].invalid" i18n>CREATE MY ConnectID</button>

            </form>

.ts:

export class BusinessPartySelectComponent implements OnInit {
partySelectForm: FormGroup;

parties: Observable<Party[]>;
partyCount: number;

viewData = {
    atLeastOnePartyNotConnected: true,
    hideModal: true
};

// View model
selectedParty: Party;

autoSelectIfOneNonConnectedPartyReturned = true;

constructor(private formBuilder: FormBuilder,
            private store: Store<State>) {
}

ngOnInit() {
    this.partySelectForm = this.formBuilder.group({
        partyId: [ '', [ Validators.required ] ],
    });

0 个答案:

没有答案