zoukankan      html  css  js  c++  java
  • [Angular2 Form] Reactive Form, FormBuilder

    Import module:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { MessageComponent } from './message.component';
    import messageRoutes from './message.routes';
    import {FormsModule, ReactiveFormsModule} from "@angular/forms";
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        messageRoutes
      ],
      declarations: [MessageComponent]
    })
    export default class MessageModule { }

    Define the html:

    <form [formGroup]="reactiveForm" novalidate autocomplete="off">
      <div class="form-field">
        <label>Title:</label>
        <input formControlName="title">
      </div>
      <div class="form-field">
        <label>Description:</label>
        <input formControlName="description">
      </div>
      <div class="form-field">
        <button type="submit">Submit</button>
      </div>
    </form>

    ts:

    
    
    reactiveForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.reactiveForm = fb.group({
          title: [
            'Title',
            [
              Validators.required,
              Validators.minLength(3)
            ]
          ],
          description: [
            'Description',
            [Validators.required]
          ]
        })
      }
    }

    group() function take an object param, each object stands for a field in template, which refer to 'formControlName'.

          // title <-- formControlName="title"
          title: [
            'Title', // <-- Default value
            [
              Validators.required,
              Validators.minLength(3)
            ] // <-- Validations
          ],
  • 相关阅读:
    什么是X86和X86-64
    PyQt 5 的学习引言
    GraphQL实战篇(一)
    GraphQL基础篇
    .net之设计模式
    .net面向对象设计原则
    Entity Framework (EF) Core工具创建一对多和多对多的关系
    NLog组件
    给dao层注入jdbcTemplate时的一个强行bug(jdbcDaoSupport不要随便用!用了要记得!)
    使用工厂模式解耦和IoC思想
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5998956.html
Copyright © 2011-2022 走看看