Never stop learning, approaching the AI
  • 😄About
  • 🅰️AI-Candy on YouTube
    • 🎬YouTube 视频列表
    • 💠AI项目本地部署
      • 1️⃣安装 Pytorch 运行环境
      • 2️⃣在Python虚拟环境下使用 VS Code or PyCharm
        • VS Code Python format
      • 3️⃣Create python virtual environment in Linux
    • 👽AI 入门系列课程
      • 0️向量及向量运算
        • Reshape array code
      • 1️人工智能,机器学习,深度学习 和神经网络的区别
      • 2️卷积神经网络(CNN)
        • 3D CNN sample code
      • 3️Transformer 原理
      • 4️前馈神经网络 (FNN)
  • 🎭Artificial intelligence
    • 1️⃣Deep learning / machine learning
      • 👉Deep Learning Resources
      • 👉Deep learning notes
    • 2️⃣Python
      • Youtube音乐下载
      • Pytorch 安装环境配置 (old)
        • TorchEEG
      • Anaconda3 Python path
      • Data
      • IEEE-754 Floating Point Converter
        • ieee 754 conversion function
      • 文件读写
      • 文本清理
      • Python 下载在线视频
      • 修改Jupyter Notebook 默认工作目录
    • 3️⃣AI Websites
  • 🪤Programming
    • SQL
      • Delete data and reset auto-increment ID
    • Angular
      • DataTable column re-order
      • Angular-datatables, dd/MM/yyyy, sorting (no paged list)
      • Datatables save state using localStorage
      • Variable storage method
      • Colour picker
      • Error fix for click columns on Datatable
      • Auto address use Google place
      • Auto address use Azure Maps
      • Upload file to Server
      • Validators.required OnChange input
      • Date, Time field
      • VS Code: Auto add missing imports when save
      • Datatable setting
      • Date time format
      • sticky <th> and <td> content
      • Filter booked time
      • Dropdown time selection with interval
      • Angular date online test
      • Updating data without refreshing the page
      • Object array sort and sum
      • Multi-type of columns use in one column
      • Select button for datatables
      • Switch button and event
      • Delete column from Array
      • Three-layer structure
      • Remove shadow when print mat-dialog content
      • JSON Parse && Object Array
      • Detect unused import in Typescript
      • Change location using radio button
      • Toastr - display multiline and position
      • Custom LOCALE_ID
      • Batch add data from csv to API server
        • Angular read csv and upload to Server
      • USB Port reader Web solution
      • Debug Angular app using JavaScript Debugger in VS Code
      • Skills
        • FormData & FormGroup to JSON
        • Dropdown list (customer)
        • Get current datetime
        • Get first day of year, month, and date
        • Call a function in a forEach loop
        • disable and readonly
        • Form element value
        • HTML input type
        • Input pattern (validation)
      • Display pipe (UI format)
        • Input upper case and button checked
        • Icons (Bootstrap and CoreUI)
        • Page Refresh
        • Selection list (two ways)
        • onChange Selection event
        • Random Password and Toggle
        • Password match
        • Select checkbox disable
      • Print and save to PDF
      • Import JS into Angular
      • LocalStorage
      • Angular DataTable
        • Data sort
        • A sample usage
        • Angular DataTable server side big data query
      • Change chart.js chart type
      • Angular UI - .NET API - .NET Auth
      • Angular - .NET API
      • *ngIf else && change to @if
      • Angular add reCAPTCHA v3 (Google)
      • Angular update
        • Update from v13 to v15
        • Update from v15 to v18
      • Angular application version central
      • Face detection
        • Face-api.js
      • Angular, Node version compatibility matrix
      • Clear cache
      • Angular oauth2 OIDC
      • Angular add header
    • .NET Skills
      • Add ID manually
      • Auto Mapping
        • Ignore Nesting
        • Startup setting
        • Datetime processing in AutoMapping
        • AutoMapper example
      • Validation filter
      • BaseController
      • Group by many
      • Database first, scaffold to class
      • Log setting and exception handler
      • Update appsetting.json value
      • Azure service bus message (queue)
      • Read appsetting.json value
      • Auth get user info by email
      • Azure Time zone
      • .NET API Add Service
      • Object comparison
      • Coravel Schedule
        • Read appsettings.json
      • .Net Core RDLC Report, Coravel and Email
      • Check Network and SQL server connections.
      • Datatime custom format
      • Many to Many EF
        • Many to Many CheckBox
      • PDFpig: Send Email with PDF attachment
      • .NET Core Middleware order
      • .NET API add Worker Service
      • .NET Router
      • Partial columns update
      • Add and Delete
      • 图片自适应宽度
      • ASP.NET Identity
      • Upload file to Azure
        • Upload file to Blob
      • Developer Guide
      • Code first one-many
      • ASP.NET MVC 5 Custom Error Page
      • VS can't debug
      • 通过邮编查 NSW COVID-19 感染人数
      • Jquery File Upload
      • Jquery Datepicker
      • ajax delete file from server
      • Autofac in MVC
      • Autofac in .NET Core
      • .NET Core
      • HTTP Return code
      • IdentityServer4
    • Power BI
      • Add parameter to PowerBI report
      • Convert UTC to Local time
      • Python in PowerBI
        • IEEE-754 conversion
      • PowerBI embed app - Server
      • PowerBI embed app - Client
        • Setting on portal
    • Azure service
      • Key Vault
      • Service bus - queue
      • Power Automate
      • Kusto Query Language
      • Azure Data Explorer
      • Reserved keyword on Azure Error
      • SQL Azure time convert
    • Azure blob
      • Azure blob setting
      • Display image from Blob
      • Upload image to Blob through .NET API
    • Html Bootstrap Icon, colour, size
      • Html spacing
      • Html text alignment
    • Video stream - JsMpeg
      • SSL - generate key
      • Client (SSL)
      • Websocket-Server (SSL)
      • Play RTSP video stream
    • ⏰Time Zone
      • datetime-local set date range
      • 🕐Get data by local time (UI, API)
      • 🕑Add offset hours for local UI and report
      • 🕒UTC time and Datetime convert
      • 🕓Angular - Timezone selection
      • 🕔Angular - Convert UTC to local time
      • 🕕C# Time Zone
  • >>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • 🪜Apps and Skills
    • 1️Windows system app skills
      • Brother HL-2130 打印机 Toner 报警
      • VS Code 快捷键
      • Check SHA256 on windows
      • blob 视频下载
      • Photoshop 制作证件照片
      • 获取 Windows Key
      • 10进制36进制互转
      • Error when publish to Azure
      • Disable windows automatic update
      • Outlook setup for Yahoo Email
      • IIS setting
      • Windows 8/10, IIS Service
      • 安装程序出错 2052,2053 报警
      • 6 Yao Chinese UI
    • 2️Linux command
    • 3️Git command
    • 4️Bitbucket
    • 5️Gitbook Skills
    • 6️GitHub Desktop
    • 7️⃣EndNote
      • EndNote V21
      • Endnote使用技巧
      • 批量删除/修改Endnote 中 notes 栏内容
  • Android mobile connect PC
  • 💎USEFUL LINKS
    • 1️Coding websites
      • Website links
    • 2️Windows 平台工具,网站
    • 3️PotPlayer 设置
  • >>>>>>>>>>>>>>>>>>>>>>>>>>>>
  • 🚩Research >>EEG
    • 1️EEG基本知识的理论介绍
      • EEG 简介
      • EEG 的节律信号
      • EEG电极帽
      • EEG 伪迹
      • ERP 介绍
      • ERP 成分
      • EEG 数据分析软件
    • 2️LSL 应用
    • 3️EEG公开数据集汇总整理
    • 4️REDCap
      • Migration (Export & Import)
    • 5️⃣ScaneR
  • ☕Buy me a coffee
Powered by GitBook
On this page

Was this helpful?

  1. Programming
  2. Angular

Validators.required OnChange input

// splitWeigh == true && truckStoredTare !=null, trailerStoredTare change to Validators.required


import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      splitWeigh: [false],
      truckStoredTare: ['', [Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]],
      trailerStoredTare: ['', [Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]],
    });

    // 监听 splitWeigh 和 truckStoredTare 的变化
    this.form.get('splitWeigh')?.valueChanges.subscribe(() => {
      this.updateTrailerStoredTareValidators();
    });

    this.form.get('truckStoredTare')?.valueChanges.subscribe(() => {
      this.updateTrailerStoredTareValidators();
    });

    // 初始化时检查
    this.updateTrailerStoredTareValidators();
  }

  updateTrailerStoredTareValidators() {
    const truckStoredTare = this.form.get('truckStoredTare')?.value;
    const splitWeigh = this.form.get('splitWeigh')?.value;

    // 如果 truckStoredTare 不为空并且 splitWeigh 为 true,则 trailerStoredTare 为必填
    if (truckStoredTare && splitWeigh) {
      this.form.get('trailerStoredTare')?.setValidators([Validators.required, Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]);
    } else {
      // 否则, trailerStoredTare 的验证不需要强制要求
      this.form.get('trailerStoredTare')?.setValidators([Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]);
    }

    // 触发验证
    this.form.get('trailerStoredTare')?.updateValueAndValidity();
  }

  truckStoreOnChange(event: any) {
    // 这里调用 updateTrailerStoredTareValidators 来确保 trailerStoredTare 的验证被正确更新
    this.updateTrailerStoredTareValidators();
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}
// Some code
```typescript
  RateTypes = [
    { id: 1, name: "UNIT RATE" },
    { id: 2, name: "FLAT RATE" },
  ];


  ngOnInit(): void {
    this.form = this.fb.group({
      rateType: [null, Validators.required],
      price: [null],
      flatRate: [null],
    });

    // 初始化时,根据 rateType 选择进行动态验证
    this.onRateTypeChange();
  }

  onRateTypeChange(event?: any): void {
    const rateType = this.form.get('rateType')?.value;

    if (rateType === 'FLAT RATE') {
      this.form.get('flatRate')?.setValidators([Validators.required, Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]);
      this.form.get('price')?.clearValidators();
    } else if (rateType === 'UNIT RATE') {
      this.form.get('price')?.setValidators([Validators.required, Validators.pattern(/^(?:[0-9]+(?:\.[0-9]{0,2})?)?$/)]);
      this.form.get('flatRate')?.clearValidators();
    }

    // 重新检测字段的有效性
    this.form.get('price')?.updateValueAndValidity();
    this.form.get('flatRate')?.updateValueAndValidity();
  }
}



```html
    <div class="form-group mb-3">
      <div>
        <label>Rate Type</label> <span style="color: red;"> *</span>
      </div>
      <div class="row">
        <select class="form-select form-control oneline2-3" formControlName="rateType" placeholder="Please select" (change)=onRateTypeChange($event)>
          @for(rateType of RateTypes; track rateType.id) {
          <option [ngValue]="rateType.name">{{rateType.name}}</option>
          }
        </select>

      </div>
    </div>

    <div class="form-group mb-2">
      <div>
        <label>Unit Price</label>
        <label style="margin-left: 186px;">Flat Rate</label>
      </div>
      <div class="row">
        <input class="form-control oneline2-3" formControlName="price" pattern="^(?:[0-9]+(?:\.[0-9]{0,2})?)?$"
          placeholder="2 decimal places" />
        <input class="form-control oneline2-3" formControlName="flatRate" pattern="^(?:[0-9]+(?:\.[0-9]{0,2})?)?$"
          placeholder="2 decimal places" />
      </div>
    </div>
```
PreviousUpload file to ServerNextDate, Time field

Last updated 4 months ago

Was this helpful?

🪤