Javascript Angular 2 Dynamic Forms如何基于另一个字段的值显示/隐藏字段
环境:Angular 2 RC 4,打字脚本 我有一个实现。我总共有4个字段-dob、电子邮件、问题和答案 问题:Javascript Angular 2 Dynamic Forms如何基于另一个字段的值显示/隐藏字段,javascript,validation,angular,typescript,forms,Javascript,Validation,Angular,Typescript,Forms,环境:Angular 2 RC 4,打字脚本 我有一个实现。我总共有4个字段-dob、电子邮件、问题和答案 问题: dob: new TextboxQuestion({ key: 'dob', label: 'Date of Birth', value: '', }), email: new TextboxQuestion({ key: 'email', label: 'Email Address', v
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>
<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>
关于如何使用动态表单实现这一点,有什么想法吗
我想我可以
不知何故,在dob之后抛出一个事件,电子邮件被填满,打电话给后端并得到问题。
使用变量隐藏/显示问题NIO,并根据上述响应的成功/失败进行回答
如果这是一个很好的方法,我怎么能感觉到用户已经填写了前两个字段并进行了后端调用。收到服务器回复后,如何更新问题字段(特别是使用动态表单)
如果没有,还有更简单的方法吗?我知道这是一个延迟的答案,但我认为基本上涵盖了您需要做的基本内容
您创建一个表单组,并根据字段的值交换验证,然后在视图中隐藏使用NGIF禁用的字段。在我看来,您将创建两个单独的表单组。第一个表单组用于dob和电子邮件,第二个表单组用于问答字段。最初,第二个表单是隐藏的(我使用ngIf)。验证第一个表单组后,取消隐藏第二个表单组并验证它etcextending@brando您可以通过评估每个项目的表单$error对象对第一个组使用test。如果所有..$error对象为null或未定义或长度为0,则验证已通过。使用与之相反的
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