typescript - 如何从属于另一个控件组的控件组中获取控件

您好。我需要检查控制是否有效，以便更改页面上的视图。我需要检查名为 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 未定义。这是我初始化 pinForm 的构造函数：

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>

答案＃1

冈特的方法应该管用，但你也可以用这种方式得到它

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

答案＃2

没有测试过，但我想应该可以

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

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