Question

美好的一天。我需要检查控件是否有效，否则无需更改页面上的视图。我需要检查pin中名为createdPins的控件，该pinFrom是showConformationOfPIN() { console.log("here"); if (this.pinForm.controls['createdPins']['pin'].valid) { this.confirmPIN = true; console.log("true"); } }的一部分。我是这样做的：

this.pinForm.controls.createdPins.pin

我收到错误，private pinForm: ControlGroup; constructor(private passPin: PassPinService, controls: FormBuilder, private checkInp: CheckInputsService, previousPage?: RouteParams) { .............. this.pinForm = controls.group({ pinLog: ["", Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(4)])], createdPins: controls.group({ pin: ["", Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(4)])], pinConfirmation: ["", Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(4)])] }, {validator: this.checkInp.areInputsEqual} ) }); }未定义。这是我初始化pinForm的构造函数：

<form [ngFormModel]="pinForm" class="centerMain">
        <div ngControlGroup="createdPins">
            <div *ngIf="!confirmPIN && prevPage == 'reg'" class="center-block">  <!-- this div should hides -->
                <div>
                    <label  class="center-block">Введите PIN</label>
                </div>
                <div>
                    <input (keyup)="showConformationOfPIN()" ngControl="pin" [(ngModel)]="final" maxlength="4" placeholder="1234" 
                            class="center-block inputLine">
                </div>          
                <!--<div>
                    <button (click)="showConformationOfPIN()" class="center-block buttonBig">Установить PIN</button> 
                </div>-->
            </div>
            <!-- Confirmation of PIN -->
            <div *ngIf="confirmPIN && prevPage == 'reg'" class="center-block"> <!--this should appears -->
                <div>
                    <label  class="center-block">Подтвердите пин</label>
                </div>
                <div>
                    <input ngControl="pinConfirmation" maxlength="4" placeholder="1234" class="center-block inputLine">
                </div>          
                <div>
                    <button (click)="sendPIN()" class="center-block buttonBig">Подтвердить</button> 
                </div>
            </div>

这是模板的一部分，我绑定了pinForm：

LoaderManager.LoaderCallbacks

Answer 1

未经测试但我认为应该是

this.pinForm.controls['createdPins'].controls['pin']

如果您执行console.log(this.pinForm.control['createdPins'])示例，则可以在浏览器控制台中进行调查，并验证controls属性是否列出了pin控件。

Answer 2

@Günter的方法应该可行，但你也可以这样做

this.pinForm.find('createdPins').find('pin')

如何从控制组获得控制权，这是另一个控制组的一部分

2 个答案: