ngModel和formControlName處理表單控件

ngModelformControlName 不能同時在同一個表單控件上使用;
二者都用于在 Angular 中處理表單控件的值,但是它們的底層實現方式不同。

ngModel 是 Angular 提供的雙向數據綁定指令,它可以將表單控件的值與組件類中的屬性進行雙向綁定。當你使用 ngModel 綁定一個表單控件時,它會自動創建一個 FormControl 并與該控件進行綁定,同時還會更新模板和組件類中的屬性值

formControlName 是 Angular 中的一個指令,用于將模板中的表單控件與響應式表單中的對應控件進行關聯。它通過提供的字符串參數來指定要綁定的表單控件的名稱,并將其與父級 FormGroupFormArray 中的相應控件進行關聯。

由于 ngModelformControlName 都用于處理表單控件的值,因此將它們同時應用于同一個表單控件會導致沖突

通常情況下,建議使用響應式表單,并通過 formControlName 在模板中進行綁定,而不是使用 ngModel。如果需要雙向綁定表單控件的值,可以使用 valueChanges 訂閱表單控件值的變化,并在組件類中手動更新屬性值。

<form [formGroup]="myForm"><input type="text" formControlName="myControl">
</form><form [formGroup]="paramForm"><input type="text" formControlName="myControl2">
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';@Component({selector: 'my-component',template: `...`
})
export class MyComponent implements OnInit {myForm: FormGroup;paramForm: FormGroup;constructor(private formbuilder: FormBuilder,) {this.paramForm = this.formbuilder.group({});}ngOnInit() {// 寫法1:this.myForm = new FormGroup({myControl: new FormControl()});// 寫法2:this.paramForm.addControl('myControl2',this.formbuilder.control('initialValue', [...]),); // ... 表示校驗內容}
}

上述示例創建了一個響應式表單,并將其與模板中的表單控件進行了綁定。通過 formControlName 指定了要綁定的表單控件的名稱,并在組件類中創建了相應的 FormControl 對象。這樣,表單控件的值將自動與組件類中的屬性保持同步。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/40464.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/40464.shtml
英文地址,請注明出處:http://en.pswp.cn/news/40464.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

軟考筆記——10.項目管理

進度管理 進度管理就是采用科學的方法&#xff0c;確定進度目標&#xff0c;編制進度計劃和資源供應計劃&#xff0c;進行進度控制&#xff0c;在與質量、成本目標協調的基礎上&#xff0c;實現工期目標。 具體來說&#xff0c;包括以下過程&#xff1a; (1) 活動定義&#…

HLS實現FIR低通濾波器+System Generator仿真

硬件&#xff1a;ZYNQ7010 軟件&#xff1a;MATLAB 2019b、Vivado 2017.4、HLS 2017.4、System Generator 2017.4 1、MATLAB設計低通濾波器 FPGA系統時鐘 50MHz&#xff0c;也是采樣頻率。用 MATLAB 生成 1MHz 和 10MHz 的正弦波疊加的信號&#xff0c;并量化為 14bit 整數。把…

css 用過渡實現,鼠標離開li時,背景色緩慢消息的樣式

要實現鼠標懸停時背景顏色變為黃色&#xff0c;鼠標離開時背景顏色慢慢消失并變回白色的效果&#xff0c; 可以使用CSS的過渡&#xff08;transition&#xff09;屬性 li {background: #fff;color: #000;transition: background 0.5s ease-out; }li:hover {background: #fbb31…

Web網頁瀏覽器遠程訪問jupyter notebook服務器【內網穿透】

文章目錄 前言1. Python環境安裝2. Jupyter 安裝3. 啟動Jupyter Notebook4. 遠程訪問4.1 安裝配置cpolar內網穿透4.2 創建隧道映射本地端口 5. 固定公網地址 前言 Jupyter Notebook&#xff0c;它是一個交互式的數據科學和計算環境&#xff0c;支持多種編程語言&#xff0c;如…

Hyper-v導致Vmware window無法啟動崩潰記錄

最近有幾次vmware啟動window10直接崩潰情況&#xff0c;顯示藍屏報錯。一開始沒在意&#xff0c;以為是因為固態硬盤錯了幾個字節導致的&#xff1f; 但后來想想不對啊。vmware用了也有10來年了&#xff0c;穩得一筆&#xff0c;在仔細思考了一下后發現打不開的win10這三個虛擬…

Oracle/PL/SQL奇技淫巧之Lable標簽與循環控制

在一些存儲過程場景中&#xff0c;可能存在需要在滿足某些條件時跳出循環的場景&#xff0c; 但是在PL/SQL中&#xff0c;不能使用break語句直接跳出循環, 但是可以通過lable標簽的方式跳出循環&#xff0c;例&#xff1a; <<outer_loop>> FOR i IN 1..5 LOOPDBMS…

Python批量替換Excel和Word中的關鍵字

一、問題的提出 有時&#xff0c;我們手頭上有多個Excel或者Word文件&#xff0c;但是領導突然要求對某幾個術語進行批量的修改&#xff0c;你是不是有要崩潰的感覺。因為這么多文件&#xff0c;要一個一個地打開文件&#xff0c;再進行批量替換修改&#xff0c;幾個文件還好&…

設計模式之構建器(Builder)C++實現

1、構建器提出 在軟件功能開發中&#xff0c;有時面臨“一個復雜對象”的創建工作&#xff0c;該對象的每個功能接口由于需求的變化&#xff0c;會使每個功能接口發生變化&#xff0c;但是該對象使用每個功能實現一個接口的流程是穩定的。構建器就是解決該類現象的。構建就是定…

【Java】項目管理工具Maven的安裝與使用

文章目錄 1. Maven概述2. Maven的下載與安裝2.1 下載2.2 安裝 3. Maven倉庫配置3.1 修改本地倉庫配置3.2 修改遠程倉庫配置3.3 修改后的settings.xml 4. 使用Maven創建項目4.1 手工創建Java項目4.2 原型創建Java項目4.3 原型創建Web項目 5. Tomcat啟動Web項目5.1 使用Tomcat插件…

【CTF-web】備份是個好習慣(查找備份文件、雙寫繞過、md5加密繞過)

題目鏈接&#xff1a;https://ctf.bugku.com/challenges/detail/id/83.html 經過掃描可以找到index.php.bak備份文件&#xff0c;下載下來后打開發現是index.php的原代碼&#xff0c;如下圖所示。 由代碼可知我們要繞過md5加密&#xff0c;兩數如果滿足科學計數法的形式的話&a…

模型預測筆記(一):數據清洗及可視化、模型搭建、模型訓練和預測代碼一體化和對應結果展示(可作為baseline)

模型預測 一、導入關鍵包二、如何載入、分析和保存文件三、修改缺失值3.1 眾數3.2 平均值3.3 中位數3.4 0填充 四、修改異常值4.1 刪除4.2 替換 五、數據繪圖分析5.1 餅狀圖5.1.1 繪制某一特征的數值情況&#xff08;二分類&#xff09; 5.2 柱狀圖5.2.1 單特征與目標特征之間的…

OpenCV基本操作——算數操作

目錄 圖像的加法圖像的混合 圖像的加法 兩個圖像應該具有相同的大小和類型&#xff0c;或者第二個圖像可以是標量值 注意&#xff1a;OpenCV加法和Numpy加法之間存在差異。OpenCV的加法是飽和操作&#xff0c;而Numpy添加的是模運算 import numpy as np import cv2 as cv imp…

[數據集][目標檢測]鋼材表面缺陷目標檢測數據集VOC格式2279張10類別

數據集格式&#xff1a;Pascal VOC格式(不包含分割路徑的txt文件和yolo格式的txt文件&#xff0c;僅僅包含jpg圖片和對應的xml) 圖片數量(jpg文件個數)&#xff1a;2279 標注數量(xml文件個數)&#xff1a;2279 標注類別數&#xff1a;10 標注類別名稱:["yueyawan",&…

Qt 窗口隨鼠標移動效果

實現在窗口任意位置按下鼠標左鍵都可以移動窗口的效果&#xff0c;完整代碼如下&#xff1a; mainwindow.h&#xff1a; #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class MainW…

PHP混淆加密以及常用的一些加密工具

PHP混淆加密是一種將源代碼轉換為難以理解和閱讀的方式&#xff0c;以保護代碼的安全性。以下是一些常見的PHP混淆加密方法&#xff1a; 代碼壓縮&#xff1a;使用代碼壓縮工具&#xff08;如UglifyJS&#xff09;將PHP代碼壓縮為一行&#xff0c;去除空格、換行符等可讀性的字…

jenkins 連接服務器,提示Can‘t connect to server

在Jenkins 添加服務器時&#xff0c;提示 Cant connect to server&#xff0c;如圖 搞了好久&#xff0c;不知道為什么不行~原來是行的&#xff0c;現在刪了 新建一個也不行。

2023牛客暑期多校訓練營8-C Clamped Sequence II

2023牛客暑期多校訓練營8-C Clamped Sequence II https://ac.nowcoder.com/acm/contest/57362/C 文章目錄 2023牛客暑期多校訓練營8-C Clamped Sequence II題意解題思路代碼 題意 解題思路 先考慮不加緊密度的情況&#xff0c;要支持單點修改&#xff0c;整體查詢&#xff0…

axios同一個接口,同時接收 文件 或者 數據

1、前端代碼 const service axios.create({baseURL: "http://192.168.2.200:8080/api",timeout: 180000 })// 響應攔截 service.interceptors.response.use(async response > {if(response){// 請求時設置返回blob, 但是實際上可能返回的是json的情況if (respon…

[C++]筆記 - 知識點積累

一.運算符的優先級 一共15個級別 最高優先級 : () []最低優先級 :逗號表達式倒數第二低優先級 : 賦值和符合賦值(,,-...) ! >算術運算符 > 關系運算符 > && >> || >賦值運算符 二.數據類型轉換 隱式類型轉換 算數轉換 char int long longlong flo…

解決Java中的“Unchecked cast: java.lang.Object to java.util.List”問題

&#x1f337;&#x1f341; 博主貓頭虎 帶您 Go to New World.?&#x1f341; &#x1f984; 博客首頁——貓頭虎的博客&#x1f390; &#x1f433;《面試題大全專欄》 文章圖文并茂&#x1f995;生動形象&#x1f996;簡單易學&#xff01;歡迎大家來踩踩~&#x1f33a; &a…