动态形状生成角5

Question

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

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

8月部分：

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"
                }
            }
        ];
    }
}

login-service.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;
    }
}

Answer 1

在登录服务中：

setForm(form){
    this.form = form
}

在第四部分：

ngOnInit() {  
    this.service.setForm(this.form);
}