angular - 动态表单生成Angular 5

问题描述

我正在实现多种登录表单。首先它会要求输入用户名和密码，然后是许可证等等。这是我目前的实现。

auth.component.ts初始形式从>ngOnInit()函数呈现。提交后它会调用login-service.ts> submit()then afterSubmit()。在这里，我期待另一个 json 用于生成表单。我正试图通过我们在最初的情况下做到这一点来实现这一点。但是this.form这个类中没有属性。我怎样才能做到这一点？

认证组件：

auth.component.html

<div class="container">
    <div id="loginbox" style="margin-top:20%;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-title">Control Tower Login</div>
            </div>
            <div style="padding-top:30px" class="panel-body">

                <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
                <app-form-builder *ngIf="form" [form]="form" [service]="service"  [submitButtonLabel]="'Login'"
                                  [additionalButton]="'Cancel'"></app-form-builder>
            </div>
        </div>
    </div>
</div>

auth.component.ts

@Component({
    selector: 'app-auth',
    templateUrl: './auth.component.html',
    providers: [AuthService, LoginService]
})
export class AuthComponent implements OnInit {

    @Input() formElements: any = [];
    form: any;
    message: any;

    constructor(private router: Router, public authService: AuthService, private service: LoginService, public event: EventService) {

    }

    ngOnInit() {

        this.form = [
            {
                "name": "username",
                "inputType": "text",
                "required": "false",
                "placeholder": {
                    "readable": "Username",
                    "key": "form.login.placeholder.username"
                },
                "label": {
                    "readable": "Username",
                    "key": "form.login.label.username"
                }
            },
            {
                "name": "password",
                "inputType": "password",
                "required": "false",
                "placeholder": {
                    "readable": "Password",
                    "key": "form.login.placeholder.password"
                },
                "label": {
                    "readable": "Password",
                    "key": "form.login.label.password"
                }
            }
        ];
    }
}

登录服务.ts

import {Injectable} from '@angular/core';
import {FormBuilderService} from "../form-builder/form-builder.service";
import {CommunicatorService} from '@eqs/ng-communicator';
import {Router} from '@angular/router';
import {USER_SERVICE_ROUTES, LICENSE_FORM_FIELDS} from './user.constant';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class LoginService extends FormBuilderService {

    private response: any;
    public step: number = 1;
    private messageSource = new BehaviorSubject<any>("default message");
    currentMessage = this.messageSource.asObservable();
    constructor(protected communicator: CommunicatorService,
                protected router: Router) {
        super(communicator, router, USER_SERVICE_ROUTES.getUserCreateForm, USER_SERVICE_ROUTES.createUser);
    }
    afterSubmit(response: any) {

    }
    /**
     * Submit the form
     *
     * @param model
     */
    submit(model) {

        console.log(model);
        this.afterSubmit(model);
    }

    getResponse() {
        return this.response;
    }
}

标签： angularangular5

angular - 动态表单生成Angular 5

问题描述

解决方案

推荐阅读