import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormBuilder , Validators } from '@angular/forms' ; import { TransferService } from './transfer.service' ; @ Component ( { selector : 'app-step1' , template : `
    <form nz-form [formGroup]="form" (ngSubmit)="_submitForm()">
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="pay_account" nz-form-item-required>付款账户</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20">
                <nz-select formControlName="pay_account" nzSize="large" nzId="pay_account">
                    <nz-option [nzLabel]="item.pay_account" [nzValue]="item.pay_account"></nz-option>
                </nz-select>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="receiver_account" nz-form-item-required>收款账户</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="receiver_account">
                <nz-input-group [nzCompact]="true">
                    <nz-select formControlName="receiver_type" nzSize="large" style="width: 25%;">
                        <nz-option [nzLabel]="'支付宝'" [nzValue]="'alipay'"></nz-option>
                        <nz-option [nzLabel]="'银行账号'" [nzValue]="'bank'"></nz-option>
                    </nz-select>
                    <input formControlName="receiver_account" nzSize="large" id="'receiver_account'" nz-input style="width: 75%;">
                </nz-input-group>
                <p nz-form-explain *ngIf="(receiver_account.dirty || receiver_account.touched) && receiver_account.errors?.required">
                    请输入收款账户
                </p>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="receiver_name" nz-form-item-required>收款姓名</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="receiver_name">
                <nz-input formControlName="receiver_name" nzSize="large" [nzId]="'receiver_name'"></nz-input>
                <ng-container *ngIf="receiver_name.dirty || receiver_name.touched">
                    <p nz-form-explain *ngIf="receiver_name.errors?.required">请输入收款姓名</p>
                    <p nz-form-explain *ngIf="receiver_name.errors?.minlength">至少2个字符以上</p>
                </ng-container>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="4">
                <label for="amount" nz-form-item-required>转账金额</label>
            </div>
            <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="amount">
                <nz-input formControlName="amount" nzSize="large" [nzId]="'amount'">
                    <ng-template #prefix>￥</ng-template>
                </nz-input>
                <ng-container *ngIf="amount.dirty || amount.touched">
                    <p nz-form-explain *ngIf="amount.errors?.required">请输入转账金额</p>
                    <p nz-form-explain *ngIf="amount.errors?.pattern">金额只能是正整数</p>
                    <p nz-form-explain *ngIf="amount.errors?.min">金额最少1元以上</p>
                    <p nz-form-explain *ngIf="amount.errors?.max">金额最多100万以内</p>
                </ng-container>
            </div>
        </div>
        <div nz-form-item nz-row>
            <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                <button nz-button [nzType]="'primary'" nzSize="large" [disabled]="form.invalid">下一步</button>
            </div>
        </div>
    </form>
    <div class="border-top-1 mt-lg px-lg text-grey-dark">
        <h3 class="h3 my-md">说明</h3>
        <h4 class="h4 mb-sm">转账到支付宝账户</h4>
        <p class="mb-sm">如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
        <h4 class="h4 mb-sm">转账到银行卡</h4>
        <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
    </div>
    ` } ) export class Step1Component implements OnInit { form : FormGroup ; constructor ( private fb , public item ) { } ngOnInit ( ) { this . form = this . fb . group ( { pay_account : [ null , Validators . compose ( [ Validators . required , Validators . email ] ) ] , receiver_type : [ null , [ Validators . required ] ] , receiver_account : [ null , [ Validators . required ] ] , receiver_name : [ null , Validators . compose ( [ Validators . required , Validators . minLength ( 2 ) ] ) ] , amount : [ null , Validators . compose ( [ Validators . required , Validators . pattern ( `[0-9]+` ) , Validators . min ( 1 ) , Validators . max ( 10000 * 100 ) ] ) ] } ) ; this . form . patchValue ( this . item ) ; } get pay_account ( ) { return this . form . controls [ 'pay_account' ] ; } get receiver_type ( ) { return this . form . controls [ 'receiver_type' ] ; } get receiver_account ( ) { return this . form . controls [ 'receiver_account' ] ; } get receiver_name ( ) { return this . form . controls [ 'receiver_name' ] ; } get amount ( ) { return this . form . controls [ 'amount' ] ; } _submitForm ( ) { this . item = Object . assign ( this . item , this . form . value ) ; ++ this . item . step ; } }