Form 表單的 validation 問題一問

General
1

請教有關在程式中呼叫表單的 validation 的問題：
問題描述：
我的註冊表單裡有兩個個按鈕，一個是「完成申請」，另一個是「輸入測試資料」。
當我手動輸入資料後，按下「完成申請」後，在 register(registerForm)中的 console.log 就可以看到表單內各欄位的值。
如果我改用點擊「完成申請」後，畫面中各欄位都有看到程式代為輸入的值。但是當我按下「完成申請」後， register(registerForm)中的 consolo.log()的 dump，發現 myForm 表單裡的各欄位的 value 還是空值。 {userId:"", userName:"", passwd:""}.
即便我有呼叫表單的 updateValueAndValidity(), 但再次檢查表單(myForm.form.valid)的值仍就是 false, myForm.form.status 仍就是 INVALID

請問我是少做了哪些事情？謝謝

我把我的測試程式碼放在：https://stackblitz.com/edit/angular-txjk4l 煩請各位大德幫忙解惑。謝謝

Angular 7:
register-account.component.html:

<div class=“register-div”>
<p>註冊新帳號</p>
<form #myform=“ngForm” (ngSubmit)=“register(myform)”>
<table>
<tr>
<td>登入帳號：</td>
<td><input type=“text” ngModel #userId name=“userId” required=“true”/></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type=“text” ngModel #userName name=“userName” required=“true”/></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type=“text” ngModel #passwd name=“passwd” required=“true”/></td>
</tr>
<tr>
<td colspan=“2” style=“text-align: center”>
<button type=“submit”>完成申請</button>&nbsp;&nbsp;
<button type=“button” (click)=“inputTestData()”>輸入測試資料</button>
</td>
</tr>
</table>
</form>
</div>

register-account.component.ts:

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {UserLoginService} from '../user-login.service';

@Component({
  selector: 'app-register-account',
  templateUrl: './register-account.component.html',
  styleUrls: ['./register-account.component.css']
})
export class RegisterAccountComponent implements OnInit {
  @ViewChild('userId') userId: ElementRef;
  @ViewChild('userName') userName: ElementRef;
  @ViewChild('passwd') passwd: ElementRef;
  @ViewChild('myform') myForm;
  constructor(private userLoginService: UserLoginService) { }

  ngOnInit() {
  }

  register(registerForm) {
    console.log(registerForm.value);
    const result = this.userLoginService.registerUser(registerForm);
  }
   /**
    * 由程式代為輸入測試資料，縮短輸入時間
    */
  inputTestData() {
    console.log('inputTestData(): is called....');
    this.userId.nativeElement.value = 'mary';
    this.userName.nativeElement.value = 'Mary X';
    this.passwd.nativeElement.value = '123456';
    this.myForm.form.updateValueAndValidity();
    console.log(' valid:' + this.myForm.form.valid);
  }
}
2

根據你的思路，可以這樣寫：

  register(registerForm) {
    const value = {
      userId: this.userId.nativeElement.value,
      userName: this.userName.nativeElement.value,
      passwd: this.passwd.nativeElement.value,
    }

    this.myForm.form.patchValue(value);
    this.myForm.form.updateValueAndValidity();

    console.log(this.myForm.form.valid);
  }

官方建議的寫法是這樣啦
https://angular.io/guide/forms#summary

3

Angular 不是這樣寫的, 建議先把 Angular 文件的 tutorial 做一次

https://angular.io/tutorial

然後關於表單操作的文件讀清楚吧

https://angular.io/guide/forms-overview

(把 .io 換成 .tw 可以切換繁體中文版)
(用了 Angular 就不要再一直想怎麼去改 DOM 了)

4

謝謝建議喔。
這就立刻回去重K一次Angular 的表單操作。

更新：試驗出來了，謝謝指導