[已解決] Angular ReactiveForm 的 Validator --- 只有 required 有效其他都沒效 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2

[已解決] Angular ReactiveForm 的 Validator --- 只有 required 有效其他都沒效

angular reactform validators minlength

peace&love 2021-05-16 16:27:48 ‧ 1448 瀏覽

如題...
errors只列印出required
試過minLength(),maxLength(),parttern都列印不出來...
是哪裡寫錯了嗎...？？
列印出的結果－－－

startNum: FormControl
errors:
required: true
__proto__: Object
pristine: true
status: "INVALID"

程式碼
html

<form  [formGroup]="form">
<input 
type="number" 
class="input" 
formControlName="startNum">

ts

public form!: FormGroup;
constructor(private fb: FormBuilder,) {}
ngOnInit(): void {
    this.form = this.fb.group({
     startNum: new FormControl('',{
        validators: [
          Validators.minLength(4),
          Validators.required,
          Validators.pattern('\d{7}')
        ],
      }),
    });
  }

找不到問題出在哪＠＠~感恩~

abhor115 iT邦新手 5 級 ‧ 2021-05-16 17:00:05 檢舉

minLength >minlength 應該用小寫
用('\\d{7}) 試試

peace&love iT邦新手 5 級 ‧ 2021-05-16 17:16:21 檢舉

('\\d{7})修好了！感恩

minlength 小寫vscode會報錯
“Property 'minlength' does not exist on type 'typeof Validators'. Did you mean 'minLength'?“

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

1 個回答

3

黃升煌 Mike

iT邦研究生 5 級 ‧ 2021-05-16 17:25:59

最佳解答

問題出在　<input type="number" ...>
minLength 是判斷字串長度，也就是 "123".length 這種，但 type=number 的設定會讓你拿到數值，判斷 123.length 是錯誤的

回應 2
分享
檢舉

黃升煌 Mike iT邦研究生 5 級 ‧ 2021-05-16 17:27:10 檢舉

BTW，應該是 Reactive Forms

peace&love iT邦新手 5 級 ‧ 2021-05-16 17:35:15 檢舉

成功解決了！～～～謝謝！

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙