我正在研究 angular5，想要验证我的子组件的表单。 我有条件地在 DOM 中添加输入，但 @viewChild 没有更新表单

Question

    <form #form="ngForm" name="formRecurringPayment" id="adyen-encrypted-form" ng novalidate>
    <div *ngIf="selectedCardItem === 'newCard'">
        <div class="panel panel-default new-card fadeIn">
            <div class="panel-body">
                <div class="flex-lg flex-md">
                    <div class="flex__item--grow">
                        <label class="control-label control-label--uppercase" for="ccnumber">Card number</label>
                        <div class="form-group">
                            <input class="form-control form-control--no-label"
                            [ngClass]="{ 'has-error' : CardNumber.dirty && CardNumber.invalid }" name="ccnumber" id="ccnumber"
                            type="text" autocomplete="cc-number" maxlength="23" data-encrypted-name="number"
                            #CardNumber="ngModel" [(ngModel)]="cardname" (input)="validf($event.target.value,'ccnumber')" required appFormatCard appCheckEmpty>
                            <i class="icon control-validation-state"></i>
                            <p class="help-block text-danger" *ngIf="CardNumber.dirty && CardNumber.invalid">Please enter card
                                number
                            </p>
                        </div>
                    </div>
                    <div class="accepted-cards hidden-sm hidden-xs">
                        <p class="text-caption text-muted margin-bottom-8">We accept</p>
                        <ul class="list-unstyled flex-always">
                            <li class="margin-right-8"><i class="sprite-common sprite-common--cards-visa display-block"></i></li>
                            <li class="margin-right-8"><i class="sprite-common sprite-common--cards-mastercard display-block"></i>
                            </li>
                            <li><i class="sprite-common sprite-common--cards-amex display-block"></i></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

父组件

    <app-recurring-payment #recurringPaymentForm
    *ngIf="userHasCards && bookingAmendSection !== 'booker'"
    (SendrecurringPaymentForm)="getForm($event)"
    [bookingState]="bookingState"
    [user]="user"
    [price]="price"
    [appCopy]="appCopy"
    [payByInvoice]="payByInvoice"
    [overridePayment]="overridePayment"
    (deleteSavedCard)="deleteSavedCard($event)"> 
    </app-recurring-payment>

父组件 TS

    @Component({
      selector: "app-step-payment",
      templateUrl: "./step-payment.component.html",
      styleUrls: ["./step-payment.component.scss"],
      providers: [DataStorageService, ValidationService],
    })
    export class StepPaymentComponent implements OnInit, OnDestroy, OnChanges {
      @ViewChild("bookerForm") bookerForm;
      @ViewChild("standardPaymentForm") standardPaymentForm;
      @ViewChild("recurringPaymentForm") recurringPaymentForm;
      paymentHandle() {
        console.log(this.reccuringPaymentForm);
      }
    }

在这里，您可以看到 safari 浏览器表单控制台日志，即使在将新输入添加到表单 @viewChild 后，我仍然始终为我提供旧快照