![](/img/trans.png)
[英]Gravity Forms - How to Hide Some Options in a Dropdown pricing Field based on Value selected in Another Dropdown field
[英]Angular 2 Dynamic Forms How to show/hide a field based on the values of another
環境:Angular 2 RC 4,打字稿。
我有一個動態角度形式的實現。 我總共有4個字段-DOB,電子郵件,問題和答案
問題:
dob: new TextboxQuestion({
key: 'dob',
label: 'Date of Birth',
value: '',
}),
email: new TextboxQuestion({
key: 'email',
label: 'Email Address',
value: '',
type: 'email',
}),
securityQuestion: new TextboxQuestion({
key: 'challengeQuestion',
label: 'Security Question',
value: '',
disabled: true
}),
securityAnswer: new TextboxQuestion({
key: 'challengeAnswer',
label: 'Write your answer',
value: '',
})
主要/父組件的html代碼段
<dynamic-form (responsesEvt)="onFormSubmitResponseReceived($event);" [sections]="sections" class="col-md-8"></dynamic-form>
動態形式組件
<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let question of questions" class="form-row" >
<df-question [question]="question" [form]="form" *ngIf="!section.hidden"></df-question>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7 btn-row">
<button type="submit" class="btn btn-primary pull-right" [disabled]="!form.valid">I agree with the Terms & Conditions</button>
<!--<button type="submit" class="btn btn-primary pull-right" [disabled]="!form.valid || subbmittedalready">I agree with the Terms & Conditions</button>-->
<button type="button" class="btn btn-default pull-right">Cancel</button>
</div>
</div>
</form>
df-問題組件
<div [formGroup]="form">
<div class="col-md-5"><label class="pull-right" [attr.for]="question.key"><span class="errorMessage">* </span>{{question.label}}</label></div>
<div class="col-md-7" [ngSwitch]="question.controlType">
<input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" class="form-control"
[placeholder]="question.placeHolder"
/>
</div>
<div class="col-md-5"></div>
</div>
這是我的工作流程
Step 1 Initially at form load, only dob and email show up.
Step 2 User types in the dob and email. DOB and email are sent to the backend and if the info is correct, a "question" is returned.
Step 3 Now the question and answer fields appear (assuming that above step was successful). The question field is populated with the value returned from the server through the previous request
Step 4 User submits the form with dob, email, question and answer
關於如何使用動態表單實現這一點的任何想法?
我想我可以在dob之后以某種方式引發事件,填寫電子郵件,致電后端並提出問題。 使用一個變量來隱藏/顯示問題並根據上述響應的成功/失敗進行回答?
如果這是一個好方法,我怎么能感覺到用戶已經填寫了前兩個字段並進行了后端調用。 收到服務器回復后,如何更新問題字段(特別是使用動態表單)?
如果沒有,有沒有更簡單的方法可以做到這一點?
我知道這是一個延遲的答案,但是我認為Scotch.io的這篇帖子基本上涵蓋了您需要做的基本工作。
您創建一個表單組並根據字段的值交換出驗證,然后在視圖中隱藏使用ngIfs禁用的字段。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.