我創建了一個像下面這樣的角度反應形式
組件.html
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<h5 class="card-title text-center">Login</h5>
<div class="form-group">
<label class="text-success" for="exampleInputEmail1"
>Email address</label
>
<input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
formControlName="email"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<label class="text-danger" for="exampleInputPassword1"
>Password</label
>
<input
type="password"
class="form-control"
id="exampleInputPassword1"
formControlName="password"
placeholder="Password"
/>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
組件.ts
constructor(private fb: FormBuilder) {}
public loginForm: FormGroup;
ngOnInit(): void {
this.initializeForm();
}
initializeForm = () => {
this.loginForm = this.fb.group({
age: [''],
email: ['', [Validators.required]],
password: ['', [Validators.required]],
});
this.loginForm.controls.email.disable();
this.loginForm.controls.password.disable();
}
onSubmit() {
if (this.loginForm.valid) {
console.log('Login form - valid');
} else {
console.log('Login form - invalid');
}
}
小提琴有問題
如您所見，我在表單組中有 3 個表單控制欄位email，password和age。age是一個隱藏欄位，我將根據一些邏輯從我的腳本中更新它。
我在初始化程序中使用和禁用了我的和禁用的email。稍后我將根據某些邏輯啟用它們。passwordthis.loginForm.controls.email.disable();this.loginForm.controls.password.disable();
截至目前，我禁用了 2 個必需的表單控制元件，并且尚未使用任何值進行初始化。理想情況下，此表格無效。但是，當我嘗試從表單提交功能在控制臺中記錄表單有效狀態時，它會將有效狀態記錄為 true。
為什么會這樣？
我注意到的其他一些行為是
- 而不是禁用獨立的表單控制元件，如果我們使用禁用完整
this.loginForm.disable();的表單，表單將根據我的要求保持無效狀態，但是如果我們更新表單中的值，這不會更改為有效。 - 此外，如果我禁用第三個輸入
age以及 2 個輸入email和password，表單將保持無效，但如果我們更新表單中的值，這將不會更改為有效。 - 此外，如果沒有第三個欄位
age并且我做了 2 個輸入email并password禁用，表單將保持無效，但如果我們更新表單中的值，這仍然不會更改為有效。
有人可以說為什么禁用某些輸入時表單有效嗎？
uj5u.com熱心網友回復：
當您禁用表單欄位（表單控制元件）時，這意味著該控制元件免于驗證檢查并從任何父級的聚合值中排除。狀態將是DISABLED。
- 因此，在您的專案中，當您禁用電子郵件/密碼并且年齡仍然存在時，您的表單將有效，因為年齡有效。
- 在您的第一個專案符號中，當您禁用整個表單時，您檢查表單是否有效。表格無效也不無效。您的表單將具有 status
DISABLED。 - 在第二個專案符號中，如果禁用表單的所有欄位，則表單將
DISABLED再次具有狀態，因為所有欄位都具有此狀態。 - 在第三個專案符號中，禁用兩個欄位意味著您的表單將具有
DISABLED狀態。
換句話說，檢查有效和無效形式是不正確的。嘗試使用else if并添加DISABLED檢查以更好地理解。
if (this.loginForm.valid) {
console.log('Login form - valid');
} else if (this.loginForm.invalid) {
console.log('Login form - invalid');
} else if (this.loginForm.disabled) {
console.log('Login form - disabled');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/416300.html
標籤：