如何解决我正在研究 angular5,想要验证我的子组件的表单我有条件地在 DOM 中添加输入,但 @viewChild 没有更新表单
<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 始终为我提供旧快照之后,我仍然如此
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。