首頁 web前端 js教程 Angular4表單回應功能範例分析

Angular4表單回應功能範例分析

Dec 14, 2017 am 11:20 AM
功能 範例

本文主要介紹了Angular4編程之表單響應功能,結合實例形式分析了Angular4表單響應功能的具體實現步驟與相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。

響應式表單

1、響應式表單需要在appmodule檔案中註入響應式表單模組


import { FormsModule, ReactiveFormsModule } from '@angular/forms';
<!--
  这里引用模块的时候要注意,具体是哪个module文件使用了表单,
  因为在某些情况下表单是被appmodule下的某个子module文件使用,
  那么就要在该子module文件中引入响应式表单模块。
-->
@NgModule(
  {imports: [FormsModule, ReactiveFormsModule……]
  ……}
登入後複製


2、form.component.ts元件當中引用

第一種方式:


import { Component } from &#39;@angular/core&#39;;
import { FormGroup, FormControl, FormBuilder} from &#39;@angular/forms&#39;;
@Component({
 templateUrl: &#39;forms.component.html&#39;
})
export class FormsComponent {
 formModel: FormGroup;
 constructor(fb: FormBuilder) {
  this.formModel= fb.group({
   formControl1: [&#39;&#39;],
   formControl2: [&#39;&#39;],
   ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}
登入後複製


第二個方式:


import { Component } from &#39;@angular/core&#39;;
import { FormGroup, FormControl} from &#39;@angular/forms&#39;;
@Component({
 templateUrl: &#39;forms.component.html&#39;
})
export class FormsComponent {
 formModel: FormGroup; /*这里定义表单变量名,HTML文件中绑定时使用*/
 constructor() {
  this.formModel= new FormGroup({
    formControl1: new FormControl(),
    formControl2: new FormControl(),
    ……
  });
 }
 onSubmit () {
  console.log(this.formModel.value);
 }
}
登入後複製


3、對應的HTML檔


<form action="" method="post" [formGroup]=&#39;formModel&#39;> <!-- 通过指令绑定ts文件中命名的变量名 --!>
  <p class="form-group row">
   <p class="col-md-6">
    <p class="row">
     <label>formControl1</label>
     <input type="text" formControlName=&#39;formControl1&#39;>
    </p>
   </p>
   <p class="col-md-6">
    <p class="row">
     <label>formControl2</label>
    <input type="text" formControlName=&#39;formControl2&#39;>
    </p>
   </p>
  </p>
</form>
登入後複製


至此,簡單的回應式表單就完成了。

相關推薦:

詳解Angular4的輸入屬性與輸出屬性

Angular4中項目的準備與環境建置操作

### #########關於Angular4.0 資料的綁定事項######

以上是Angular4表單回應功能範例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

豆包app有什麼功能 豆包app有什麼功能 Mar 01, 2024 pm 10:04 PM

豆包app裡會有很多ai創作的功能,那麼豆包app有什麼功能呢?使用者可以透過這個軟體來創作繪畫,和ai進行聊天,也能夠為用戶生成文章,幫助大家搜尋歌曲等。這篇豆包app功能介紹就能夠告訴大家具體的操作方法,以下就是具體內容,趕快看看吧!豆包app有什麼功能答:可以畫畫、聊天、寫文、找歌。功能介紹:1、問題查詢:可以透過ai來更快的找到問題的答案,什麼樣的問題都是可以詢問。 2.圖片生成:可以有ai來為大家創造不同的圖片,只需要告訴大家大概的要求。 3.ai聊天:能夠為用戶創建一個可以聊天的ai,

vivox100s和x100區別:效能比較及功能解析 vivox100s和x100區別:效能比較及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手機都是vivo手機產品線中的代表機型,它們分別代表了vivo在不同時間段內的高端技術水平,因此這兩款手機在設計、性能和功能上均有一定區別。本文將從效能比較和功能解析兩個面向對這兩款手機進行詳細比較,幫助消費者更好地選擇適合自己的手機。首先,我們來看vivox100s和x100在效能上的比較。 vivox100s搭載了最新的

自媒體到底是什麼?它的主要特點和功能有哪些? 自媒體到底是什麼?它的主要特點和功能有哪些? Mar 21, 2024 pm 08:21 PM

隨著網路的快速發展,自媒體這個概念已經深入人心。那麼,自媒體到底是什麼呢?它有哪些主要特點和功能呢?接下來,我們將一一探討這些問題。一、自媒體到底是什麼?自媒體,顧名思義,就是自己就是媒體。它是指透過網路平台,個人或團隊可以自主創建、編輯、發布和傳播內容的資訊載體。不同於傳統媒體,如報紙、電視、電台等,自媒體具有更強的互動性和個人化,讓每個人都能成為訊息的生產者和傳播者。二、自媒體的主要特色和功能有哪些? 1.低門檻:自媒體的崛起降低了進入媒體產業的門檻,不再需要繁瑣的設備和專業的團隊,一部手

小紅書帳號管理軟體有哪些功能?怎麼經營小紅書帳號? 小紅書帳號管理軟體有哪些功能?怎麼經營小紅書帳號? Mar 21, 2024 pm 04:16 PM

隨著小紅書在年輕人中的流行,越來越多的人開始利用這個平台分享各方面的經驗和生活見解。如何有效管理多個小紅書帳號成為關鍵問題。在本文中,我們將討論一些小紅書帳號管理軟體的功能,並探討如何更好地經營小紅書帳號。隨著社群媒體的發展,許多人發現自己需要管理多個社群帳號。對於小紅書用戶來說,這也是一個挑戰。一些小紅書帳號管理軟體可以幫助使用者更輕鬆地管理多個帳號,包括自動發佈內容、定時發布、資料分析等功能。透過這些工具,使用者可以更有效率地管理他們的帳號,提高帳號的曝光率和關注。另一、小紅書帳號管理軟體有

PHP技巧:快速實現返回上一頁功能 PHP技巧:快速實現返回上一頁功能 Mar 09, 2024 am 08:21 AM

PHP技巧:快速實現回到上一頁功能在網頁開發中,常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗,讓使用者更方便地在網頁之間進行導航。在PHP中,我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能,並提供具體的PHP程式碼範例。在PHP中,我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL

Oracle DECODE函數詳解及用法範例 Oracle DECODE函數詳解及用法範例 Mar 08, 2024 pm 03:51 PM

Oracle中的DECODE函數是一種條件式,常用於在查詢語句中根據不同的條件傳回不同的結果。本文將詳細介紹DECODE函數的語法、用法和範例程式碼。一、DECODE函數語法DECODE(expr,search1,result1[,search2,result2,...,default])expr:要進行比較的表達式或欄位。 search1,

什麼是Discuz? Discuz的定義與功能介紹 什麼是Discuz? Discuz的定義與功能介紹 Mar 03, 2024 am 10:33 AM

《探索Discuz:定義、功能及程式碼範例》隨著網路的快速發展,社群論壇已成為人們獲取資訊、交流觀點的重要平台。在眾多的社群論壇系統中,Discuz作為國內較知名的一種開源論壇軟體,備受廣大網站開發者和管理員的青睞。那麼,什麼是Discuz?它又有哪些功能,能為我們的網站提供怎樣的幫助呢?本文將對Discuz進行詳細介紹,並附上具體的程式碼範例,幫助讀者更

Go語言的縮排規範及範例 Go語言的縮排規範及範例 Mar 22, 2024 pm 09:33 PM

Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言,它以简洁、清晰的语法著称,其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范,并通过具体的代码示例进行详细说明。缩进规范在Go语言中,缩进使用制表符(tab)而非空格。每级缩进为一个制表符,通常设置为4个空格的宽度。这样的规范统一了代码风格,使得团队合作编

See all articles