import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'cm-form-doc',
    template: require('./form-doc.component.html'),
    styles: [require('./form-doc.component.css')]
})

export class FormDocComponent implements OnInit {

    apiPath = './docs/components/form-doc/form.api.json';

    doc_1 = {
        title: "水平登录栏",
        intro: "水平登录栏，常用在顶部导航栏中。",
        htmlPath: "./docs/components/form-doc/form-doc-1/form-doc-1.component.html",
        tsPath: "./docs/components/form-doc/form-doc-1/form-doc-1.component.ts"
    }

    doc_2 = {
        title: "登录框",
        intro: "普通的登录框，可以容纳更多的元素。",
        htmlPath: "./docs/components/form-doc/form-doc-2/form-doc-2.component.html",
        tsPath: "./docs/components/form-doc/form-doc-2/form-doc-2.component.ts"
    }

    doc_3 = {
        title: "注册新用户",
        intro: "用户填写必须的信息以注册新用户",
        htmlPath: "./docs/components/form-doc/form-doc-3/form-doc-3.component.html",
        tsPath: "./docs/components/form-doc/form-doc-3/form-doc-3.component.ts"
    }

    doc_4 = {
        title: "高级搜索",
        intro: "三列栅格式的表单排列方式，常用于数据表格的高级搜索。有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。。",
        htmlPath: "./docs/components/form-doc/form-doc-4/form-doc-4.component.html",
        tsPath: "./docs/components/form-doc/form-doc-4/form-doc-4.component.ts"
    }

    doc_5 = {
        title: "动态增减表单项",
        intro: "动态增减、减少表单项。",
        htmlPath: "./docs/components/form-doc/form-doc-5/form-doc-5.component.html",
        tsPath: "./docs/components/form-doc/form-doc-5/form-doc-5.component.ts"
    }

    doc_6 = {
        title: "表单布局",
        intro: "表单有三种布局",
        htmlPath: "./docs/components/form-doc/form-doc-6/form-doc-6.component.html",
        tsPath: "./docs/components/form-doc/form-doc-6/form-doc-6.component.ts"
    }

    doc_7 = {
        title: "自定义同步校验",
        intro: "我们为表单控件定义了三种校验状态，你可以不使用Reactive Form的异步返回数据，而直接定义表单的返回状态，定义<nz-form-control>的nzValidateStatus 输入即可。nzValidateStatus 可选择状态有'success', 'warning', 'error', 'validating'四种。另外为输入框添加反馈图标，添加 <nz-form-control> 的 nzHasFeedback 属性即可。注意: 反馈图标只对 <nz-input/> 有效。",
        htmlPath: "./docs/components/form-doc/form-doc-7/form-doc-7.component.html",
        tsPath: "./docs/components/form-doc/form-doc-7/form-doc-7.component.ts"
    }

    doc_8 = {
        title: "自定义异步校验",
        intro: "当使用 响应式表单(Reactive Form) 时，<nz-form-control> 的 nzValidateStatus 会自动从 NgControl 中获取数据，也可以手动指定特定的 NgControl组件将表单校验函数的校验过程和异步返回的结果显示对应的error | validating(pending) | warning | success状态，具体使用方式建议参照本demo另外为输入框添加反馈图标，添加 <nz-form-control> 的 nzHasFeedback 属性即可。注意: 反馈图标只对 <nz-input /> 有效。",
        htmlPath: "./docs/components/form-doc/form-doc-8/form-doc-8.component.html",
        tsPath: "./docs/components/form-doc/form-doc-8/form-doc-8.component.ts"
    }

    doc_9 = {
        title: "校验其他组件",
        intro: "以上演示没有出现的表单控件对应的校验演示。",
        htmlPath: "./docs/components/form-doc/form-doc-9/form-doc-9.component.html",
        tsPath: "./docs/components/form-doc/form-doc-9/form-doc-9.component.ts"
    }

    doc_10 = {
        title: "自适应表单布局",
        intro: "以上演示没有出现的表单控件对应的校验演示。",
        htmlPath: "./docs/components/form-doc/form-doc-10/form-doc-10.component.html",
        tsPath: "./docs/components/form-doc/form-doc-10/form-doc-10.component.ts"
    }

    constructor() {

    }

    ngOnInit() {

    }

}