第8章 Angular表達 01 模板驅動表單。

時間 2019-12-10

原文原文鏈接

模板驅動表單是什麼？

在原生JS中，若是要作一個表單的驗證/校驗，
客戶端校驗：react

須要獲取到這個須要驗證的DOM元素，而後獲取其value值，而後處理。
好比：

<body>
    <div class="form-group m-2">
        <form action="">
            <h4>測試表單</h4>
            <label for="input1"></label>
            <input type="text" id="input1" class="form-control">

        </form>

    </div>
    <button id="btn1" class="btn btn-primary m-2">點擊驗證</button>
    <p id="test"class="m-2"></p>

</body>
<script>
    let btn1 = document.getElementById('btn1');
    btn1.addEventListener('click', function () {
        let p = document.getElementById('test');
        let input1 = document.getElementById('input1');
        // 獲取輸入值 並驗證
       if(input1.value.length<4){

           p.innerHTML='密碼不能低於四位';
       }
       else{
           p.innerHTML= "驗證經過"
       }

    })
</script>

可見，這樣比較麻煩。api

一樣能夠利用HTML5內置校驗，這樣作性能更好，但不支持自定義校驗。

<body>
    <div class="form-group m-2">
        <form action="">
            <h4>測試表單</h4>
            <label for="input1"></label>
/* 這裏添加了HTML內置的表單驗證屬性，不寫一行腳本，就能作到相似的事情*/
            <input type="text" id="input1" class="form-control" minlength="4">
        </form>
    </div>
</body>

Angular提供的模板驅動表單，就是一種創建在HTML內置校驗基礎上的簡單校驗方式。ide

爲何說是簡單校驗？

由於他很簡單啊!性能

HTML5的內置校驗，就是爲了提升性能，減小沒必要要重複工做而來。特色就是：不寫一行腳本，也能進行用戶數據(的客戶端)校驗。Angular模板驅動表單創建在這種基礎上，因此提供了極爲便利的校驗手段。測試

二者怎麼結合使用？

想快就看這兒！給input(以及其餘的獨立表單域)添加ngModel 指令，給（若是有的話）包含獨立表單域的表單域組添加ngModelGroup屬性，給form添加ngForm屬性（注意，這個不要顯示添加，Angular幫咱們自動作完了）。Angular會自動爲每一個添加指令的表單元素後臺建立控制對象(分爲兩種，都屬於AbstractControl類的子類)，而後分別用模板字符串得到他們身後的控制對象。這些對象中就有咱們須要的各類屬性。

首先考慮這個問題，想驗證表單，層層遞進的思路以下：ui

就要考慮要驗證什麼，怎麼驗證，驗證經過什麼手段

要驗證form 標籤(總體)、要驗證form標籤內input等獨立輸入域(獨立)、若是form標籤內，內容複雜，可能分爲好幾個輸入域組，那麼也能夠驗證某個組。這就是要驗證什麼
>- 若是單個表單域，好比input標籤的required沒有被知足，那麼驗證不經過、若是一個輸入域組內部的某一個標籤驗證沒經過，那麼驗證不經過、若是form標籤內的某一組驗證不合格，那麼驗證不經過。這就是怎麼驗證。
>- 在Angular中，經過給表單元素添加directive,Angular就爲這個元素建立一個對應的控制對象，經過這個控制對象的屬性，就能或者分別、或者總體的驗證一個form表單內的所用元素。

總結一下就是：code