验证ngx-admin angular项目中的表单布局 [英] Validation of form layouts in ngx-admin angular project

问题描述

借助ngx-admin/forms/form布局的表单.我做了自己的表格.现在，我想将验证应用于表单并将数据发送到firebase.我尝试使用formgroup，ngmodel.什么都行不通.帮帮我.

With the help of forms of ngx-admin/forms/form layout. I made my own form. Now I want to apply validation to the form and send data to firebase. I tried using formgroup, ngmodel. Nothing works. Help me out.

这是formlayout的链接- https://www.akveo. com/ngx-admin/pages/forms/layouts

This is the link for formlayout - https://www.akveo.com/ngx-admin/pages/forms/layouts

我已经从此处下载了模板- https://akveo.github.io/ngx-管理员/

I had downloaded the template from here - https://akveo.github.io/ngx-admin/

<nb-card>
  <nb-card-header>Appointment form</nb-card-header>
  <nb-card-body>

    <form class="form-horizontal">

      <div class="row">

        <div class="col-lg-6">
        <div class="form-control-group">
          <label for="title" class="label col-sm-3 form-control-label">Title</label>
            <div class="col-sm-9">
            <nb-select selected="1" id="title">
              <nb-option value="1">Select</nb-option>
              <nb-option value="2">Mr.</nb-option>
              <nb-option value="3">Mrs.</nb-option>
              <nb-option value="4">Ms</nb-option>
            </nb-select>
          </div>
        </div>

        <div class="form-group row">
          <label for="fname" class="label col-sm-3 form-control-label">First Name</label>
          <div class="col-sm-9">
            <input 
              type="text" nbInput fullWidth id="fname" placeholder="First Name" 
              required/>
          </div>
        </div>

        <div class="form-group row">
          <label for="mname" class="label col-sm-3 form-control-label">Middle Name</label>
          <div class="col-sm-9">
            <input type="text" nbInput fullWidth id="mname" placeholder="Middle Name">
          </div>
        </div>

        <div class="form-group row">
          <label for="lname" class="label col-sm-3 form-control-label">Last Name</label>
          <div class="col-sm-9">
            <input type="text" nbInput fullWidth id="lname" placeholder="Last Name">
          </div>
        </div>
    </div>

      <div class="col-lg-6">
        <div class="form-group row">
          <label for="email" class="label col-sm-3 form-control-label">Email</label>
          <div class="col-sm-9">
            <input type="email" nbInput fullWidth id="lname" placeholder="Email">
          </div>
        </div>

        <div class="form-group row">
          <label for="adrss" class="label col-sm-3 form-control-label">Address</label>
          <div class="col-sm-9">
            <textarea rows="5" id="adrss" nbInput fullWidth shape="round"  placeholder="Address"></textarea>
          </div>
        </div>

        <div class="form-group row">
          <label for="doctor" class="label col-sm-3 form-control-label">Referred By</label>
            <div class="col-sm-9">
            <nb-select selected="1" id="doctor">
              <nb-option value="1">Select</nb-option>
              <nb-option value="2">Dr. Abc</nb-option>
              <nb-option value="3">Dr. Xyz</nb-option>
              <nb-option value="4">Dr. Lmn</nb-option>
            </nb-select>
          </div>
        </div>

      </div>

        <div class="form-group row">
          <div class="offset-sm-3 col-sm-9">
            <button type="submit" nbButton status="warning">Book Appointment</button>
        </div>
      </div>


    </div>
    </form>
  </nb-card-body>
</nb-card>

推荐答案

以下是如何使用反应式的示例: 首先，您必须从模块中的angular/forms导入 ReactiveFormsModule 那么您可以使用 formGroup 指令和 FormControlName 指令提供的 formControlName 输入来绑定每个输入. 检查: https://angular.io/guide/reactive-forms

here is an exemple of how to use reactive forms: first you must import ReactiveFormsModule from angular/forms in your module then you can use formGroup Directive and the formControlName input provided by the FormControlName directive to bind each of you inputs. check: https://angular.io/guide/reactive-forms

这篇关于验证ngx-admin angular项目中的表单布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！