Chỉ số đầu vào bootstrap

Xác thực đầu vào của người dùng là một phần thiết yếu của bất kỳ ứng dụng web mạnh mẽ nào. Angular 4 làm cho nó trở nên đặc biệt dễ dàng cho cả biểu mẫu dựa trên mẫu và biểu mẫu phản ứng. Trong bài viết này, Nhà phát triển góc tự do hàng đầu Igor Geshoski hướng dẫn chúng ta các cách tiếp cận khác nhau trong xác thực biểu mẫu Angular 4 và chỉ ra cách xác thực biểu mẫu phức tạp có thể được thực hiện dễ dàng như thế nào

Qua

Igor Geshoski

Igor đã trau dồi các thuật toán và kỹ năng giải quyết vấn đề của mình trên các ứng dụng doanh nghiệp dựa trên Java quy mô lớn trong khoảng 5 năm

ĐĂNG LẠI

ĐĂNG LẠI

Trên web, một số phần tử đầu vào của người dùng sớm nhất là nút, hộp kiểm, kiểu nhập văn bản và nút radio. Cho đến tận ngày nay, những yếu tố này vẫn được sử dụng trong các ứng dụng web hiện đại mặc dù tiêu chuẩn HTML đã đi một chặng đường dài so với định nghĩa ban đầu của nó và hiện cho phép tất cả các loại tương tác ưa thích.

Xác thực đầu vào của người dùng là một phần thiết yếu của bất kỳ ứng dụng web mạnh mẽ nào

Các biểu mẫu trong ứng dụng Góc có thể tổng hợp trạng thái của tất cả các đầu vào dưới biểu mẫu đó và cung cấp trạng thái tổng thể như trạng thái xác thực của biểu mẫu đầy đủ. Điều này có thể thực sự hữu ích để quyết định xem đầu vào của người dùng sẽ được chấp nhận hay từ chối mà không cần kiểm tra riêng từng đầu vào

Trong bài viết này, bạn sẽ tìm hiểu cách bạn có thể làm việc với các biểu mẫu và thực hiện xác thực biểu mẫu một cách dễ dàng trong ứng dụng Angular của mình

Trong Angular 4, có hai loại biểu mẫu khác nhau có sẵn để làm việc với. các hình thức dựa trên mẫu và phản ứng. Chúng ta sẽ xem xét từng loại biểu mẫu bằng cách sử dụng cùng một ví dụ để xem những thứ giống nhau có thể được triển khai theo những cách khác nhau như thế nào. Sau đó, trong bài viết này, chúng ta sẽ xem xét một cách tiếp cận mới về cách thiết lập và làm việc với các biểu mẫu lồng nhau

Hình thức góc 4

Trong Angular 4, bốn trạng thái sau thường được sử dụng bởi các biểu mẫu

• hợp lệ – trạng thái hợp lệ của tất cả các điều khiển biểu mẫu, đúng nếu tất cả các điều khiển đều hợp lệ

• không hợp lệ – nghịch đảo của

  
    ..
    
    ..
    
    ..
    
    ..
    
    ..
    
  
  

  5;

• nguyên sơ – đưa ra trạng thái về “độ sạch” của biểu mẫu;

• dơ bẩn – nghịch đảo của

  
    ..
    
    ..
    
    ..
    
    ..
    
    ..
    
  
  

  6;

Chúng ta hãy xem một ví dụ cơ bản của một biểu mẫu

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Thông số kỹ thuật cho ví dụ này là như sau

• tên - là bắt buộc và duy nhất trong số tất cả người dùng đã đăng ký

• năm sinh - phải là một số hợp lệ và người dùng phải có ít nhất 18 và dưới 85 tuổi

• quốc gia - là bắt buộc và để làm cho mọi thứ phức tạp hơn một chút, chúng tôi cần xác nhận rằng nếu quốc gia là Pháp, thì thành phố phải là Paris (giả sử rằng dịch vụ của chúng tôi chỉ được cung cấp ở Paris)

• phoneNumber – mỗi số điện thoại phải tuân theo một mẫu nhất định, phải có ít nhất một số điện thoại và người dùng được phép thêm mới hoặc xóa số điện thoại hiện có

• Nút “Đăng ký” chỉ được bật nếu tất cả các thông tin đầu vào đều hợp lệ và sau khi được nhấp vào, nút này sẽ gửi biểu mẫu

• "In ra bảng điều khiển" chỉ in giá trị của tất cả các đầu vào ra bảng điều khiển khi được nhấp

Mục tiêu cuối cùng là thực hiện đầy đủ đặc tả được xác định

Biểu mẫu hướng mẫu

Các biểu mẫu hướng mẫu rất giống với các biểu mẫu trong AngularJS (hoặc Angular 1, như một số đề cập đến nó). Vì vậy, ai đó đã từng làm việc với các biểu mẫu trong AngularJS sẽ rất quen thuộc với cách tiếp cận này để làm việc với các biểu mẫu

Với việc giới thiệu các mô-đun trong Angular 4, mỗi loại biểu mẫu cụ thể nằm trong một mô-đun riêng biệt và chúng ta phải xác định rõ ràng loại nào chúng ta sẽ sử dụng bằng cách nhập mô-đun thích hợp. Mô-đun đó dành cho các biểu mẫu dựa trên mẫu là FormsModule. Nói như vậy, bạn có thể kích hoạt các biểu mẫu dựa trên mẫu như sau

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Như được trình bày trong đoạn mã này, trước tiên chúng ta phải nhập mô-đun trình duyệt vì nó “cung cấp các dịch vụ cần thiết để khởi chạy và chạy một ứng dụng trình duyệt. ” (từ tài liệu Angular 4). Sau đó, chúng tôi nhập FormsModule cần thiết để kích hoạt các biểu mẫu dựa trên mẫu. Và cuối cùng là khai báo thành phần gốc, AppComponent, trong các bước tiếp theo chúng ta sẽ triển khai biểu mẫu

Hãy nhớ rằng trong ví dụ này và các ví dụ sau, bạn phải đảm bảo rằng ứng dụng được khởi động đúng cách bằng phương pháp

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Chúng ta có thể giả sử rằng AppComponent (ứng dụng. thành phần. ts) trông giống như thế này

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Vị trí mẫu của thành phần này trong ứng dụng. thành phần. tpl. html và chúng tôi có thể sao chép mẫu ban đầu vào tệp này

Lưu ý rằng mỗi phần tử đầu vào phải có thuộc tính

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..

  ..

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Chìa khóa cho phép phần tử đầu vào được chú ý dưới dạng phần tử Angular 4 và được đăng ký với thành phần NgForm là chỉ thị NgModel. Vì vậy, chúng ta có thể mở rộng ứng dụng. thành phần. tpl. mẫu html như sau

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Bằng cách thêm chỉ thị NgModel, tất cả các đầu vào được đăng ký vào thành phần NgForm. Với điều này, chúng tôi đã xác định một biểu mẫu Angular 4 hoạt động đầy đủ và cho đến nay, rất tốt, nhưng chúng tôi vẫn không có cách nào để truy cập thành phần NgForm và các chức năng mà nó cung cấp. Hai chức năng chính được cung cấp bởi NgForm là

• Truy xuất các giá trị của tất cả các điều khiển đầu vào đã đăng ký

• Truy xuất trạng thái chung của tất cả các điều khiển

To expose the NgForm, we can add the following to the

  ..

Điều này có thể thực hiện được nhờ thuộc tính

  ..

  ..

Khi điều này được thực hiện, chúng tôi có thể truy cập các giá trị của tất cả các điều khiển đầu vào và mở rộng mẫu thành

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Với

  ..

  ..

Điều gì sẽ xảy ra nếu chúng ta muốn có một nhóm phụ các đầu vào từ một ngữ cảnh cụ thể được bao bọc trong một vùng chứa và đối tượng riêng biệt trong các giá trị JSON e. g. , vị trí chứa quốc gia và thành phố hoặc số điện thoại? . Cách để đạt được điều này là sử dụng chỉ thị

  ..

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Những gì chúng tôi thiếu bây giờ là một cách để thêm nhiều số điện thoại. Cách tốt nhất để làm điều này là sử dụng một mảng, như là đại diện tốt nhất của một bộ chứa nhiều đối tượng có thể lặp lại, nhưng tại thời điểm viết bài này, tính năng đó không được triển khai cho các biểu mẫu hướng mẫu. Vì vậy, chúng tôi phải áp dụng một giải pháp thay thế để thực hiện công việc này. Phần số điện thoại cần được cập nhật như sau

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  ..

  ..

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Chúng tôi cũng cần cập nhật

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Chúng tôi phải lưu trữ một ID duy nhất cho mỗi số điện thoại mới được thêm vào và trong

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Được rồi, những gì chúng tôi có cho đến nay, chúng tôi đã thêm biểu mẫu được hỗ trợ Angular 4 với đầu vào, thêm một nhóm đầu vào cụ thể (vị trí và số điện thoại) và hiển thị biểu mẫu trong mẫu. Nhưng nếu chúng ta muốn truy cập đối tượng NgForm trong một phương thức nào đó trong thành phần thì sao?

Đối với cách đầu tiên, NgForm, được gắn nhãn

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Chúng ta phải có một phương thức tương ứng

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Bằng cách này, bằng cách tận dụng sự kiện onSubmit, chúng tôi chỉ có quyền truy cập vào thành phần NgForm khi quá trình gửi được thực thi

Cách thứ hai là sử dụng truy vấn dạng xem bằng cách thêm trình trang trí @ViewChild vào thuộc tính của thành phần

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Với phương pháp này, chúng tôi được phép truy cập vào biểu mẫu bất kể sự kiện onSubmit có được kích hoạt hay không

Tuyệt quá. Bây giờ chúng tôi có một biểu mẫu Angular 4 hoạt động đầy đủ với quyền truy cập vào biểu mẫu trong thành phần. Nhưng, bạn có nhận thấy một cái gì đó thiếu?

Thẩm định

Xác thực thực sự quan trọng đối với mỗi ứng dụng. Chúng tôi luôn muốn xác thực đầu vào của người dùng (chúng tôi không thể tin tưởng người dùng) để ngăn việc gửi/lưu dữ liệu không hợp lệ và chúng tôi phải hiển thị một số thông báo có ý nghĩa về lỗi để hướng dẫn đúng cách người dùng nhập dữ liệu hợp lệ

Đối với một số quy tắc xác thực được thực thi trên một số đầu vào, trình xác thực phù hợp phải được liên kết với đầu vào đó. Angular 4 đã cung cấp một bộ trình xác thực phổ biến như.

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Vì vậy, làm thế nào chúng ta có thể liên kết một trình xác thực với một đầu vào?

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Ví dụ này bắt buộc phải nhập "tên". Hãy thêm một số xác thực cho tất cả các đầu vào trong ví dụ của chúng tôi

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Ghi chú.

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

01 được sử dụng để vô hiệu hóa xác thực biểu mẫu gốc của trình duyệt

Chúng tôi đã yêu cầu "tên", trường "năm" là bắt buộc và chỉ bao gồm các số, quốc gia nhập vào là bắt buộc và số điện thoại cũng là bắt buộc. Ngoài ra, chúng tôi in trạng thái hợp lệ của biểu mẫu với

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Một cải tiến cho ví dụ này cũng sẽ hiển thị những gì sai với đầu vào của người dùng (không chỉ hiển thị trạng thái tổng thể). Trước khi chúng tôi tiếp tục thêm xác thực bổ sung, tôi muốn triển khai thành phần trợ giúp cho phép chúng tôi in tất cả các lỗi cho điều khiển được cung cấp

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Danh sách có lỗi chỉ được hiển thị nếu có một số lỗi hiện có và đầu vào bị chạm hoặc bẩn

Thông báo cho mỗi lỗi được tra cứu trong bản đồ gồm các thông báo được xác định trước

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Thành phần này có thể được sử dụng như sau

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Chúng ta cần hiển thị NgModel cho từng đầu vào và chuyển nó đến thành phần hiển thị tất cả các lỗi. Bạn có thể nhận thấy rằng trong ví dụ này, chúng tôi đã sử dụng một mẫu để kiểm tra xem dữ liệu có phải là một số hay không; . Ngoài ra, chúng tôi đang thiếu trình xác thực cho một tên duy nhất, hạn chế kỳ lạ của quốc gia (nếu quốc gia = 'Pháp', thì thành phố phải là 'Paris'), mẫu cho số điện thoại chính xác và xác thực rằng ít nhất một số điện thoại . Đây là thời điểm thích hợp để xem xét các trình xác thực tùy chỉnh

Angular 4 cung cấp một giao diện mà mỗi trình xác thực tùy chỉnh phải triển khai, giao diện Trình xác thực (thật bất ngờ. ). Giao diện Trình xác thực về cơ bản trông như thế này

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Trường hợp mỗi triển khai cụ thể PHẢI triển khai phương thức 'xác thực'. Phương thức

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Có một vài điều cần giải thích ở đây. Trước tiên, bạn có thể nhận thấy rằng chúng tôi đã triển khai giao diện Trình xác thực. Phương thức

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Vâng, đơn giản như vậy

Đối với số điện thoại, chúng tôi có thể xác thực định dạng của số điện thoại như thế này

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Bây giờ đến hai xác nhận, cho quốc gia và số lượng số điện thoại. Nhận thấy một cái gì đó phổ biến cho cả hai? . Chà, bạn có nhớ giao diện Trình xác thực và những gì chúng tôi đã nói về nó không? . Điều này tạo cơ hội để triển khai trình xác thực sử dụng nhiều điều khiển để xác định trạng thái xác thực cụ thể

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Chúng tôi đã triển khai trình xác thực mới, trình xác thực quốc gia-thành phố. Bạn có thể nhận thấy rằng bây giờ với tư cách là một đối số, phương thức xác thực nhận được một Nhóm biểu mẫu và từ Nhóm biểu mẫu đó, chúng ta có thể truy xuất các đầu vào cần thiết để xác thực. Phần còn lại của những thứ rất giống với trình xác thực đầu vào duy nhất

Trình xác thực cho số lượng số điện thoại sẽ trông như thế này

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Chúng ta có thể sử dụng chúng như thế này

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Giống như trình xác thực đầu vào, phải không?

Bạn có nhớ thành phần ShowErrors không? . Hãy nhớ rằng tại thời điểm này, các quy tắc xác thực được liên kết trực tiếp duy nhất với biểu mẫu là

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Điều cuối cùng còn lại là xác thực cho một tên duy nhất. Điều này hơi khác một chút; . Điều này được phân loại là một hoạt động không đồng bộ. Với mục đích này, chúng ta có thể sử dụng lại kỹ thuật trước đó cho các trình xác thực tùy chỉnh, chỉ cần làm cho

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Chúng tôi đang đợi trong 1 giây và sau đó trả về kết quả. Tương tự như trình xác thực đồng bộ hóa, nếu lời hứa được giải quyết bằng

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Nó sẽ tắt nút cho đến khi trình xác thực không đồng bộ được giải quyết

Đây là một Plunker chứa AppComponent hoàn chỉnh, thành phần ShowErrors và tất cả Trình xác thực

Với các ví dụ này, chúng tôi đã đề cập đến hầu hết các trường hợp làm việc với các biểu mẫu dựa trên mẫu. Chúng tôi đã chỉ ra rằng các biểu mẫu hướng mẫu thực sự giống với các biểu mẫu trong AngularJS (các nhà phát triển AngularJS sẽ thực sự dễ dàng di chuyển). Với loại biểu mẫu này, khá dễ dàng để tích hợp các biểu mẫu Angular 4 với lập trình tối thiểu, chủ yếu với các thao tác trong mẫu HTML

hình thức phản ứng

Các biểu mẫu phản ứng còn được gọi là các biểu mẫu "dựa trên mô hình", nhưng tôi thích gọi chúng là các biểu mẫu "có lập trình" và bạn sẽ sớm hiểu tại sao. Các biểu mẫu phản ứng là một cách tiếp cận mới đối với sự hỗ trợ của các biểu mẫu Angular 4, vì vậy không giống như định hướng mẫu, các nhà phát triển AngularJS sẽ không quen thuộc với loại này

Chúng ta có thể bắt đầu ngay bây giờ, hãy nhớ làm thế nào các biểu mẫu dựa trên mẫu có một mô-đun đặc biệt?

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Ngoài ra, đừng quên khởi động ứng dụng

Chúng ta có thể bắt đầu với cùng một AppComponent và mẫu như trong phần trước

Tại thời điểm này, nếu FormsModule không được nhập (và vui lòng đảm bảo rằng nó không được nhập), thì chúng ta chỉ có một thành phần biểu mẫu HTML thông thường với một vài điều khiển biểu mẫu, không có phép thuật Góc nào ở đây

Chúng tôi đi đến điểm mà bạn sẽ nhận thấy tại sao tôi thích gọi cách tiếp cận này là “lập trình. ” Để kích hoạt các biểu mẫu Angular 4, chúng ta phải khai báo đối tượng FormGroup theo cách thủ công và điền vào đó các điều khiển như thế này

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Các phương thức

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Khi xây dựng bất kỳ loại nào trong ba loại này, hãy nhớ quy tắc số 3 này. Hàm tạo cho mỗi loại nhận ba đối số—

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Đối với FormGroup,

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Đối với FormArray,

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Đối với FormControl,

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

Chúng tôi đã tạo đối tượng FormGroup, nhưng mẫu vẫn chưa nhận biết được đối tượng này. Việc liên kết giữa FormGroup trong thành phần và mẫu được thực hiện bằng bốn chỉ thị.

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Bây giờ chúng ta có FormArray, bạn có thể thấy rằng chúng ta có thể sử dụng cấu trúc đó để hiển thị tất cả các số điện thoại

Và bây giờ là thêm phần hỗ trợ thêm bớt số điện thoại (trong thành phần)

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Bây giờ, chúng ta có một dạng phản ứng Angular 4 hoạt động đầy đủ. Lưu ý sự khác biệt so với các biểu mẫu hướng mẫu trong đó Nhóm biểu mẫu được “tạo trong mẫu” (bằng cách quét cấu trúc mẫu) và được chuyển đến thành phần, trong các biểu mẫu phản ứng thì ngược lại, Nhóm biểu mẫu hoàn chỉnh được tạo trong . Tuy nhiên, một lần nữa, chúng tôi gặp vấn đề tương tự với việc xác thực, vấn đề sẽ được giải quyết trong phần tiếp theo

Thẩm định

Khi nói đến xác thực, các biểu mẫu phản ứng linh hoạt hơn nhiều so với các biểu mẫu dựa trên mẫu. Không có thay đổi bổ sung nào, chúng tôi có thể sử dụng lại cùng một trình xác thực đã được triển khai trước đó (đối với định hướng mẫu). Vì vậy, bằng cách thêm các chỉ thị của trình xác nhận, chúng tôi có thể kích hoạt cùng một xác thực

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Hãy nhớ rằng bây giờ chúng ta không có chỉ thị NgModel để chuyển đến thành phần ShowErrors, nhưng FormGroup hoàn chỉnh đã được xây dựng và chúng ta có thể chuyển AbstractControl chính xác để truy xuất lỗi

Đây là một Plunker hoạt động đầy đủ với loại xác thực này cho các biểu mẫu phản ứng

Nhưng sẽ không vui nếu chúng ta chỉ sử dụng lại trình xác thực, phải không?

Bạn có nhớ quy tắc “quy tắc 3s” mà chúng tôi đã đề cập về hàm tạo cho FormGroup, FormControl và FormArray không? . Vì vậy, hãy thử cách tiếp cận đó

Đầu tiên, chúng ta cần trích xuất các hàm

  

    Name
    
  

  

    Birth Year
    
  

  

    
Location
    

      Country
      
    
    

      City
      
    
  

  

    
Phone numbers
    

      Phone number 1
      
      remove
    
    Add phone number
  

  Register
  Print to console

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Bây giờ chúng ta có thể thay đổi việc tạo 'myForm' thành

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Nhìn thấy? . soạn thảo (cũng là Trình xác thực. ComposeAsync có sẵn). Và, thế là xong, việc xác thực sẽ hoạt động hoàn toàn. Cũng có một Plunker cho ví dụ này

Điều này dành cho tất cả những người ghét từ "mới". Để làm việc với các biểu mẫu phản ứng, có một lối tắt được cung cấp—chính xác hơn là một trình tạo. FormBuilder cho phép tạo FormGroup hoàn chỉnh bằng cách sử dụng “builder pattern. ” Và điều đó có thể được thực hiện bằng cách thay đổi cấu trúc FormGroup như thế này

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Không phải là một cải tiến lớn so với việc khởi tạo bằng “mới”, nhưng đó là. Và, đừng lo lắng, cũng có một Plunker cho việc này

Trong phần thứ hai này, chúng ta đã xem xét các dạng phản ứng trong Angular 4. Như bạn có thể nhận thấy, đó là một cách tiếp cận hoàn toàn mới đối với việc thêm hỗ trợ cho các biểu mẫu. Mặc dù có vẻ dài dòng, nhưng cách tiếp cận này mang lại cho nhà phát triển toàn quyền kiểm soát cấu trúc cơ bản cho phép các biểu mẫu trong Angular 4. Ngoài ra, vì các biểu mẫu phản ứng được tạo theo cách thủ công trong thành phần, nên chúng được hiển thị và cung cấp một cách dễ dàng để kiểm tra và kiểm soát, trong khi điều này không xảy ra với các biểu mẫu dựa trên mẫu

Hình thức làm tổ

Nesting forms is in some cases useful and a required feature, mainly when the state (e.g., validity) of a sub-group of controls needs to determined. Think about a tree of components; we might be interested in the validity of a certain component in the middle of that hierarchy. That would be really hard to achieve if we had a single form at the root component. But, oh boy, it is a sensitive manner on a couple of levels. First, nesting real HTML forms, according to the HTML specification, is not allowed. We might try to nest

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Trong phần tiếp theo, chúng ta sẽ xem xét một số tùy chọn về cách lồng các biểu mẫu. Tôi muốn chỉ ra rằng chúng ta có thể phân biệt hai kiểu lồng nhau. trong cùng một thành phần và trên các thành phần khác nhau

Làm tổ trong cùng một thành phần

Nếu bạn xem ví dụ mà chúng tôi đã triển khai với phương pháp tiếp cận dựa trên mẫu và phản ứng, bạn sẽ nhận thấy rằng chúng tôi có hai vùng chứa điều khiển bên trong, “vị trí” và “số điện thoại. ” Để tạo vùng chứa đó, để lưu trữ các giá trị trong một đối tượng thuộc tính riêng biệt, chúng tôi đã sử dụng các chỉ thị NgModelGroup, FormGroupName và FormArrayName. Nếu bạn xem kỹ định nghĩa của từng lệnh, bạn có thể nhận thấy rằng mỗi lệnh đều mở rộng lớp ControlContainer (trực tiếp hoặc gián tiếp). Chà, bạn biết gì không, hóa ra điều này là đủ để cung cấp chức năng mà chúng tôi yêu cầu, gói gọn trạng thái của tất cả các điều khiển bên trong và truyền trạng thái đó cho cấp độ gốc

Đối với biểu mẫu hướng mẫu, chúng ta cần thực hiện các thay đổi sau

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Chúng tôi đã thêm thành phần ShowErrors vào từng nhóm để chỉ hiển thị các lỗi liên quan trực tiếp đến nhóm đó. Vì chúng tôi đã chuyển trình xác nhận

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Và số điện thoại-số-validator. chỉ thị. ts để

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Bạn có thể thử ví dụ đầy đủ với các biểu mẫu dựa trên mẫu trong Plunker này

Và đối với các dạng phản ứng, chúng ta sẽ cần một số thay đổi tương tự

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  templateUrl: 'src/app.component.tpl.html'
})
export class AppComponent {

}

Các thay đổi tương tự từ

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Và cuối cùng, chúng ta cần sửa đổi cấu trúc của FormGroup thành

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Và bạn đã có nó—chúng tôi cũng đã cải thiện việc xác thực cho các biểu mẫu phản ứng và như mong đợi, Plunker cho ví dụ này

Làm tổ trên các thành phần khác nhau

Nó có thể gây sốc cho tất cả các nhà phát triển AngularJS, nhưng trong Angular 4, việc lồng các biểu mẫu trên các thành phần khác nhau không hoạt động ngay lập tức. Tôi sẽ thành thật với bạn; . Nguyên tắc thực thi chính của Angular4 là luồng dữ liệu một chiều, từ trên xuống dưới thông qua cây thành phần. Toàn bộ khung được thiết kế như vậy, trong đó hoạt động quan trọng, phát hiện thay đổi, được thực hiện theo cách tương tự, từ trên xuống dưới. Nếu chúng tôi hoàn toàn tuân theo nguyên tắc này, chúng tôi sẽ không gặp vấn đề gì và tất cả các thay đổi sẽ được giải quyết trong một chu kỳ phát hiện đầy đủ. Đó là ý tưởng, ít nhất. Để kiểm tra xem luồng dữ liệu một chiều có được triển khai chính xác hay không, những người tốt bụng trong nhóm Angular 4 đã triển khai một tính năng mà sau mỗi chu kỳ phát hiện thay đổi, trong khi ở chế độ phát triển, một vòng phát hiện thay đổi bổ sung được kích hoạt để kiểm tra xem có ràng buộc nào không . Điều này có nghĩa là gì, hãy nghĩ về một cây các thành phần (C1, C2, C3, C4) như trong Hình. 1, phát hiện thay đổi bắt đầu ở thành phần C1, tiếp tục ở thành phần C2 và kết thúc ở thành phần C3

Nếu chúng tôi có một số phương pháp trong C3 với tác dụng phụ làm thay đổi một số liên kết trong C1, điều đó có nghĩa là chúng tôi đang đẩy dữ liệu lên trên, nhưng phát hiện thay đổi cho C1 đã được thông qua. Khi làm việc ở chế độ nhà phát triển, vòng thứ hai bắt đầu và nhận thấy sự thay đổi trong C1 do thực thi phương thức trong một số thành phần con. Sau đó, bạn gặp rắc rối và có thể bạn sẽ thấy ngoại lệ "Biểu thức đã thay đổi sau khi được kiểm tra". Bạn chỉ có thể tắt chế độ phát triển và sẽ không có ngoại lệ, nhưng vấn đề sẽ không được giải quyết;

Khi bạn biết điều đó, hãy nghĩ xem chúng ta đang làm gì nếu chúng ta tổng hợp trạng thái biểu mẫu. Đúng vậy, dữ liệu được đẩy lên trên cây thành phần. Ngay cả khi làm việc với các biểu mẫu đơn cấp, việc tích hợp các điều khiển biểu mẫu (

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Với những gì chúng ta biết cho đến nay, ý tưởng đầu tiên xuất hiện trong đầu là sử dụng các biểu mẫu phản ứng, tạo cây biểu mẫu đầy đủ trong một số thành phần gốc và sau đó chuyển các biểu mẫu con cho các thành phần con làm đầu vào. Bằng cách này, bạn đã kết hợp chặt chẽ cha mẹ với các thành phần con và làm lộn xộn logic nghiệp vụ của thành phần gốc với việc xử lý việc tạo tất cả các biểu mẫu con. Thôi nào, chúng tôi là những chuyên gia, tôi chắc chắn rằng chúng tôi có thể tìm ra cách tạo các thành phần hoàn toàn biệt lập với các biểu mẫu và cung cấp một cách biểu mẫu để truyền trạng thái tới bất kỳ ai là phụ huynh

Tất cả điều này đang được nói, đây là một chỉ thị cho phép các biểu mẫu Angular 4 lồng nhau (được triển khai vì nó cần thiết cho một dự án)

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Ví dụ trong GIF sau đây cho thấy một thành phần

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Ví dụ được triển khai trong Plunker này

Các tính năng mà nó cung cấp là

• Cho phép lồng nhau bằng cách thêm chỉ thị NestableForm vào các phần tử. biểu mẫu, ngForm, [ngForm], [formgroup]

• Hoạt động với các biểu mẫu dựa trên mẫu và phản ứng

• Cho phép xây dựng một cây biểu mẫu bao gồm nhiều thành phần

• Cô lập một cây con của các biểu mẫu với rootNestableForm=”true” (nó sẽ không đăng ký với NestableForm gốc)

Lệnh này cho phép một biểu mẫu trong thành phần con đăng ký với NestableForm gốc đầu tiên, bất kể biểu mẫu gốc có được khai báo trong cùng một thành phần hay không. Chúng tôi sẽ đi vào chi tiết của việc thực hiện

Trước hết, chúng ta hãy xem hàm tạo. Đối số đầu tiên là

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Cái này tra cứu phụ huynh NestableFormDirective đầu tiên. @SkipSelf, để không khớp với chính nó và @Optional vì nó có thể không tìm thấy cha mẹ, trong trường hợp ở dạng gốc. Bây giờ chúng ta có một tham chiếu đến biểu mẫu có thể lồng nhau của cha mẹ

Đối số thứ hai là

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

Bộ tiêm được sử dụng để truy xuất FormGroup

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Và đối số cuối cùng là

  ..
  
  ..
  
  ..
  
  ..
  
  ..
  

để lấy giá trị xác định xem biểu mẫu này có bị cô lập khỏi cây biểu mẫu không

Tiếp theo, trên

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Hành động

import {FormsModule} from '@angular/forms'
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from 'src/app.component';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Chỉ thị cho các biểu mẫu có thể lồng nhau có thể được tùy chỉnh thêm cho một nhu cầu cụ thể—có thể xóa hỗ trợ cho các biểu mẫu phản ứng, đăng ký từng biểu mẫu con dưới một tên cụ thể (không phải trong một mảng CHILD_FORMS), v.v. Việc triển khai lệnh NestableForm này đã đáp ứng các yêu cầu của dự án và được trình bày ở đây như vậy. Nó bao gồm một số trường hợp cơ bản như thêm một biểu mẫu mới hoặc xóa một biểu mẫu hiện có một cách linh hoạt (*ngIf) và truyền trạng thái của biểu mẫu cho cha mẹ. Về cơ bản, điều này tập trung vào các hoạt động có thể được giải quyết trong một chu kỳ phát hiện thay đổi (có hoãn hay không)

Nếu bạn muốn một số tình huống nâng cao hơn như thêm xác thực có điều kiện vào một số đầu vào (e. g. [required]=”someCondition”) sẽ yêu cầu 2 vòng phát hiện thay đổi, nó sẽ không hoạt động do quy tắc “độ phân giải một chu kỳ phát hiện” do Angular 4 áp đặt

Dù sao, nếu bạn có kế hoạch sử dụng chỉ thị này hoặc thực hiện một số giải pháp khác, hãy hết sức cẩn thận với những điều được đề cập liên quan đến phát hiện thay đổi. Tại thời điểm này, đây là cách triển khai Angular 4. Nó có thể thay đổi trong tương lai-chúng ta không thể biết. Thiết lập hiện tại và hạn chế được thi hành trong Angular 4 đã được đề cập trong bài viết này có thể là nhược điểm hoặc lợi ích. Nó vẫn còn để được nhìn thấy

Biểu mẫu được thực hiện dễ dàng với Angular 4

Như bạn có thể thấy, nhóm Angular đã thực hiện rất tốt công việc cung cấp nhiều chức năng liên quan đến biểu mẫu. Tôi hy vọng rằng bài đăng này sẽ đóng vai trò là một hướng dẫn đầy đủ để làm việc với các loại biểu mẫu khác nhau trong Angular 4, đồng thời cung cấp cái nhìn sâu sắc về một số khái niệm nâng cao hơn như lồng các biểu mẫu và quy trình phát hiện thay đổi

Mặc dù có tất cả các bài đăng khác nhau liên quan đến các biểu mẫu Angular 4 (hoặc bất kỳ chủ đề Angular 4 nào khác cho vấn đề đó), theo tôi, điểm khởi đầu tốt nhất là tài liệu chính thức của Angular 4. Ngoài ra, những người ở góc có tài liệu hay trong mã của họ. Nhiều lần, tôi đã tìm ra giải pháp chỉ bằng cách xem mã nguồn của họ và tài liệu ở đó, không cần Google hay bất cứ thứ gì. Về việc lồng các biểu mẫu, đã thảo luận trong phần trước, tôi tin rằng bất kỳ nhà phát triển AngularJS nào bắt đầu học Angular 4 sẽ vấp phải vấn đề này vào một lúc nào đó, đó là nguồn cảm hứng của tôi để viết bài đăng này

Như chúng ta cũng đã thấy, có hai loại biểu mẫu và không có quy tắc nghiêm ngặt nào mà bạn không thể sử dụng chúng cùng nhau. Thật tuyệt khi giữ cho cơ sở mã sạch sẽ và nhất quán, nhưng đôi khi, có thể thực hiện điều gì đó dễ dàng hơn với các biểu mẫu dựa trên mẫu và đôi khi, đó là cách khác. Vì vậy, nếu bạn không ngại kích thước gói lớn hơn một chút, tôi khuyên bạn nên sử dụng bất cứ thứ gì bạn cho là phù hợp hơn trong từng trường hợp. Chỉ cần không trộn chúng trong cùng một thành phần vì nó có thể sẽ dẫn đến một số nhầm lẫn

Plunkers được sử dụng trong bài đăng này

• Biểu mẫu hướng mẫu

• Biểu mẫu phản ứng, trình xác thực mẫu

• Biểu mẫu phản ứng, trình xác thực mã

• Biểu mẫu phản ứng, trình tạo biểu mẫu

• Các biểu mẫu dựa trên mẫu, được lồng trong cùng một thành phần

• Các hình thức phản ứng, được lồng trong cùng một thành phần

• Các biểu mẫu lồng nhau thông qua cây thành phần

Có liên quan. nút thông minh. Xác thực biểu mẫu js

Hiểu những điều cơ bản

AngularJS là gì?

Angular là một khung JavaScript cố định để xây dựng các ứng dụng web động. Nó sử dụng khuôn mẫu, nội xạ phụ thuộc và liên kết dữ liệu để biến HTML thành một môi trường định hướng phát triển ứng dụng

Xác thực mẫu là gì?

Xác thực biểu mẫu là quá trình xác minh rằng đầu vào của người dùng hợp lệ để được lưu trữ và thực hiện theo. Nếu dữ liệu không xác thực được, người dùng sẽ được hiển thị lại biểu mẫu để sửa các lỗi nhập đã chỉ định

thẻ

Người làm việc tự do? Tìm công việc tiếp theo của bạn.

Công việc tự do từ xa

Xem thông tin đầy đủ

Igor Geshoski

Nhà phát triển góc cạnh tự do

Thông tin về các Tác giả

Igor đã làm việc trên các ứng dụng doanh nghiệp dựa trên Java quy mô lớn trong khoảng năm năm. Trong sự nghiệp của mình, anh ấy đã tham gia vào các dự án với logic kinh doanh rất thách thức. Với nền tảng vững chắc về thuật toán và giải quyết vấn đề, Igor luôn nỗ lực hướng tới các giải pháp chung và tối ưu nhất đáp ứng các yêu cầu chất lượng khắt khe nhất. Anh ấy được coi là một cầu thủ của đội và là người hỗ trợ thường xuyên cho các đồng đội của anh ấy ở mỗi đội mà anh ấy tham gia

Thuê Igor

Bình luận

Samseen

Điều này là rất lớn. Tốt lắm Igor

Samseen

Điều này là rất lớn. Tốt lắm Igor

Leonardo Costa Borges

Bài báo tuyệt vời. Nó thực sự giúp tôi quyết định về các dạng Góc. Cảm ơn

Leonardo Costa Borges

Bài báo tuyệt vời. Nó thực sự giúp tôi quyết định về các dạng Góc. Cảm ơn

Gampesh Sahu

thực sự bài viết rất hay. Cảm ơn rất nhiều

Gampesh Sahu

thực sự bài viết rất hay. Cảm ơn rất nhiều

Najib

Đã lưu vào mục yêu thích của tôi. Cảm ơn

Najib

Đã lưu vào mục yêu thích của tôi. Cảm ơn

Muhammad Inaam Munir

-------------------------------------------------- . Điều này có thể thực hiện được nhờ thuộc tính exportAs của trình trang trí Thành phần. -------------------------------------------------- . Tôi hiểu rằng #someVariableName là một biến mẫu mà qua đó chúng ta có thể sử dụng các biến và hàm của các thành phần. Nhưng tại sao trong trường hợp này chúng ta lại gán nó bằng "ngForm"?

Muhammad Inaam Munir

-------------------------------------------------- . Điều này có thể thực hiện được nhờ thuộc tính exportAs của trình trang trí Thành phần. -------------------------------------------------- . Tôi hiểu rằng #someVariableName là một biến mẫu mà qua đó chúng ta có thể sử dụng các biến và hàm của các thành phần. Nhưng tại sao trong trường hợp này chúng ta lại gán nó bằng "ngForm"?

Raphi Stein

Tôi đã học được rất nhiều điều thú vị này từ bài viết chi tiết, được viết tốt này. Cảm ơn. Về cùng một chủ đề, điều này đã giúp https. //Blog. đại học góc cạnh. io/giới thiệu-to-angular-2-forms-template-Driven-vs-model-Driven/

Raphi Stein

Tôi đã học được rất nhiều điều thú vị này từ bài viết chi tiết, được viết tốt này. Cảm ơn. Về cùng một chủ đề, điều này đã giúp https. //Blog. đại học góc cạnh. io/giới thiệu-to-angular-2-forms-template-Driven-vs-model-Driven/

Igor Geshoski

Xin chào @muhammadinaammunir. disqus, với '#myForm="ngForm"', chúng tôi sẽ nhận được phiên bản chỉ thị 'ngForm' một cách cụ thể. Bạn có thể xem các tài liệu sau về biến mẫu và thuộc tính 'exportAs'. https. // góc cạnh. io/guide/template-syntax#ref-vars https. // góc cạnh. io/api/core/Chỉ thị

Igor Geshoski

Xin chào @muhammadinaammunir. disqus, với '#myForm="ngForm"', chúng tôi sẽ nhận được phiên bản chỉ thị 'ngForm' một cách cụ thể. Bạn có thể xem các tài liệu sau về biến mẫu và thuộc tính 'exportAs'. https. // góc cạnh. io/guide/template-syntax#ref-vars https. // góc cạnh. io/api/core/Chỉ thị

UClamp Rajan

bài báo rất hay. Tôi đã làm theo hướng dẫn về biểu mẫu phản ứng, nhưng tôi bị mất thông số luồng ăn. yêu cầuChiều dài và thông số. bắt buộcmẫu. Cả hai đều được sử dụng như thế nào?

UClamp Rajan

bài báo rất hay. Tôi đã làm theo hướng dẫn về biểu mẫu phản ứng, nhưng tôi bị mất thông số luồng ăn. yêu cầuChiều dài và thông số. bắt buộcmẫu. Cả hai đều được sử dụng như thế nào?

Alex Yongdzin

Cảm ơn đã giải thích về logic ngForm. Cách tiếp cận dựa trên mẫu thực sự rất khó hiểu vì mọi thứ đều bị ẩn ở đó. Các hình thức phản ứng dễ hiểu và kiểm soát hơn nhiều

Alex Yongdzin

Cảm ơn đã giải thích về logic ngForm. Cách tiếp cận dựa trên mẫu thực sự rất khó hiểu vì mọi thứ đều bị ẩn ở đó. Các hình thức phản ứng dễ hiểu và kiểm soát hơn nhiều

Igor Geshoski

Xin chào @uclamprajan. disqus, tôi thấy rằng tôi đã bỏ qua phần đó. ) Đối tượng params được cung cấp cụ thể bởi từng trình xác thực, đối tượng này chứa các thuộc tính giải thích kết quả xác thực (bối cảnh), do đó, nó cụ thể cho từng trình xác thực. Trình xác thực 'minLength' (được cung cấp bởi Angular) cung cấp các thuộc tính 'requiredLength' và 'actualLength'. Thế là đủ cho một thông báo lỗi xác thực tốt. Tương tự, trình xác thực 'mẫu' (cũng do Angular cung cấp) cung cấp các thuộc tính 'requiredPattern' và 'actualValue'

Igor Geshoski

Xin chào @uclamprajan. disqus, tôi thấy rằng tôi đã bỏ qua phần đó. ) Đối tượng params được cung cấp cụ thể bởi từng trình xác thực, đối tượng này chứa các thuộc tính giải thích kết quả xác thực (bối cảnh), do đó, nó cụ thể cho từng trình xác thực. Trình xác thực 'minLength' (được cung cấp bởi Angular) cung cấp các thuộc tính 'requiredLength' và 'actualLength'. Thế là đủ cho một thông báo lỗi xác thực tốt. Tương tự, trình xác thực 'mẫu' (cũng do Angular cung cấp) cung cấp các thuộc tính 'requiredPattern' và 'actualValue'

Dhanashri Dhoke

bài viết rất hay. Cảm ơn

Dhanashri Dhoke

bài viết rất hay. Cảm ơn

ồn ào rathore

cảm ơn vì bài viết tốt đẹp

ồn ào rathore

cảm ơn vì bài viết tốt đẹp

đánh dấu M

bài đăng tuyệt vời. Giải pháp rất tao nhã cho các hình thức lồng nhau. Đây chính xác là những gì tôi đang tìm kiếm

đánh dấu M

bài đăng tuyệt vời. Giải pháp rất tao nhã cho các hình thức lồng nhau. Đây chính xác là những gì tôi đang tìm kiếm

Umesh Pathak

bài viết tuyệt vời thực sự

Umesh Pathak

bài viết tuyệt vời thực sự

thợ rèn

kiểm soát riêng tư @Input() là gì. Trừu TượngKiểm SoátChỉ Thị. Kiểm soát trừu tượng; . Làm ơn làm rõ

thợ rèn

kiểm soát riêng tư @Input() là gì. Trừu TượngKiểm SoátChỉ Thị. Kiểm soát trừu tượng; . Làm ơn làm rõ

Igor Geshoski

Đó là kiểu kết hợp trong Type script (https. //www. bản đánh máy. org/docs/sổ tay/loại nâng cao. tìm kiếm html cho "Các loại liên minh"). Loại kết hợp được sử dụng để làm cho thành phần có thể hỗ trợ mẫu và biểu mẫu phản ứng

Igor Geshoski

Đó là kiểu kết hợp trong Type script (https. //www. bản đánh máy. org/docs/sổ tay/loại nâng cao. tìm kiếm html cho "Các loại liên minh"). Loại kết hợp được sử dụng để làm cho thành phần có thể hỗ trợ mẫu và biểu mẫu phản ứng

thợ rèn

Cảm ơn Igor. Đánh giá cao phản ứng kịp thời. Chúc mừng

thợ rèn

Cảm ơn Igor. Đánh giá cao phản ứng kịp thời. Chúc mừng

Truyền thông Xiêm La

Thanks for this article. Very detailed and helpful. I am having some strange issues however. I am trying to create a Password Mismatch validation for Password and Confirm Password fields. I have started the password-validator.directive as so: import { Directive } from '@angular/core'; import { NG_VALIDATORS, FormGroup, Validator, ValidationErrors } from '@angular/forms'; @Directive({ selector: '[confirmPassword]', providers: [{ provide: NG_VALIDATORS, useExisting: PasswordValidatorDirective, multi: true }] }) export class PasswordValidatorDirective implements Validator { validate(form: FormGroup): ValidationErrors { const passControl = form.get('passwords.password'); const cpassControl = form.get('passwords.confirmPasswords'); } } On the validate(form: FormGroup): ValidationErrors statement, I am getting an error saying "(TS) A function whose declared type is neither 'void' nor 'any' must return a value." Any thoughts on why I am getting this error? Cheers

Truyền thông Xiêm La

Thanks for this article. Very detailed and helpful. I am having some strange issues however. I am trying to create a Password Mismatch validation for Password and Confirm Password fields. I have started the password-validator.directive as so: import { Directive } from '@angular/core'; import { NG_VALIDATORS, FormGroup, Validator, ValidationErrors } from '@angular/forms'; @Directive({ selector: '[confirmPassword]', providers: [{ provide: NG_VALIDATORS, useExisting: PasswordValidatorDirective, multi: true }] }) export class PasswordValidatorDirective implements Validator { validate(form: FormGroup): ValidationErrors { const passControl = form.get('passwords.password'); const cpassControl = form.get('passwords.confirmPasswords'); } } On the validate(form: FormGroup): ValidationErrors statement, I am getting an error saying "(TS) A function whose declared type is neither 'void' nor 'any' must return a value." Any thoughts on why I am getting this error? Cheers

Igor Geshoski

Tôi muốn nói rằng bạn đang thiếu câu lệnh 'return' của phương thức xác thực. Nó được khai báo để trả về một đối tượng thuộc loại 'ValidationErrors', vì vậy đó là lý do tại sao bạn gặp lỗi

Igor Geshoski

Tôi muốn nói rằng bạn đang thiếu câu lệnh 'return' của phương thức xác thực. Nó được khai báo để trả về một đối tượng thuộc loại 'ValidationErrors', vì vậy đó là lý do tại sao bạn gặp lỗi

Arthur Stankevich

Này, Igor, cảm ơn bạn vì bài viết này. Tôi nghĩ rằng BirthYearValidatorDirective có thể được cải thiện một chút để không cho phép các số phân số, e. g. 1955. 66. Nhìn chung, đó là một bài đọc rất sâu sắc, hữu ích. Cảm ơn bạn

Arthur Stankevich

Này, Igor, cảm ơn bạn vì bài viết này. Tôi nghĩ rằng BirthYearValidatorDirective có thể được cải thiện một chút để không cho phép các số phân số, e. g. 1955. 66. Nhìn chung, đó là một bài đọc rất sâu sắc, hữu ích. Cảm ơn bạn

Mutasem Barjawi

Cảm ơn bạn cho bài viết chi tiết này. Xác thực xuất hiện ngay từ chữ cái đầu tiên người dùng nhập vào. Điều này không cho người dùng cơ hội nhập giá trị đầy đủ trước khi được xác thực. Ví dụ: khi xác thực số điện thoại, khi tôi nhập chữ số đầu tiên, tôi nhận được thông báo lỗi rằng định dạng cần phải là XXX-XXX-XXX. Bạn có biết một cách hay để không hiển thị lỗi cho đến sau này khi tiêu điểm có thể nằm ngoài hộp (hoặc nếu bạn có đề xuất khác về thời điểm tốt hơn bằng mọi cách, vui lòng cho tôi biết). Cảm ơn Barjawi

Mutasem Barjawi

Cảm ơn bạn cho bài viết chi tiết này. Xác thực xuất hiện ngay từ chữ cái đầu tiên người dùng nhập vào. Điều này không cho người dùng cơ hội nhập giá trị đầy đủ trước khi được xác thực. Ví dụ: khi xác thực số điện thoại, khi tôi nhập chữ số đầu tiên, tôi nhận được thông báo lỗi rằng định dạng cần phải là XXX-XXX-XXX. Bạn có biết một cách hay để không hiển thị lỗi cho đến sau này khi tiêu điểm có thể nằm ngoài hộp (hoặc nếu bạn có đề xuất khác về thời điểm tốt hơn bằng mọi cách, vui lòng cho tôi biết). Cảm ơn Barjawi

Alan Biggie

Được viết rất tốt, logic thông qua các phương thức biểu mẫu khác nhau mà không che đậy các vấn đề trong thế giới thực. Điều này phải có trong Hướng dẫn góc chính thức. Cảm ơn - bạn đã giúp tôi hôm nay

Alan Biggie

Được viết rất tốt, logic thông qua các phương thức biểu mẫu khác nhau mà không che đậy các vấn đề trong thế giới thực. Điều này phải có trong Hướng dẫn góc chính thức. Cảm ơn - bạn đã giúp tôi hôm nay

Lautaro Lorenz

đơn giản là tuyệt vời, rất hữu ích

Lautaro Lorenz

đơn giản là tuyệt vời, rất hữu ích

dejan

Cảm ơn bạn cho ví dụ tốt đẹp này. Nó rất sạch sẽ và hữu ích

dejan

Cảm ơn bạn cho ví dụ tốt đẹp này. Nó rất sạch sẽ và hữu ích

Nate Summer-Cook

Điều đó thực sự khá dễ dàng. kiểm tra, nếu phần tử đã được chạm vào trước khi hiển thị thông báo. điều khiển. kiểm soát && không hợp lệ. xúc động

Nate Summer-Cook

Điều đó thực sự khá dễ dàng. kiểm tra, nếu phần tử đã được chạm vào trước khi hiển thị thông báo. điều khiển. kiểm soát && không hợp lệ. xúc động

Bob Mazzo

Phương thức `markAsDirty()` của biểu mẫu đã thực sự giúp ích cho tôi. Cảm ơn bạn

Bob Mazzo

Phương thức `markAsDirty()` của biểu mẫu đã thực sự giúp ích cho tôi. Cảm ơn bạn

Anushree Kaple

Khi tôi đang cố gắng xây dựng, tôi nhận được "Điều khiển 'thuộc tính' không tồn tại trên loại 'AbstractControl'. " Xin vui lòng giúp đỡ

Anushree Kaple

Khi tôi đang cố gắng xây dựng, tôi nhận được "Điều khiển 'thuộc tính' không tồn tại trên loại 'AbstractControl'. " Xin vui lòng giúp đỡ

Vivek Sharma

Xin chào Igor, Một điều nhanh chóng. lệnh này bằng cách nào đó không hoạt động đối với các thành phần con được chia sẻ từ các mô-đun khác, có ý tưởng nào về điều đó không ??

Vivek Sharma

Xin chào Igor, Một điều nhanh chóng. lệnh này bằng cách nào đó không hoạt động đối với các thành phần con được chia sẻ từ các mô-đun khác, có ý tưởng nào về điều đó không ??

John Hammond

You can try out a framework/library called ts.validator.fluent. Generic object validation. Fluent rules. https://github.com/VeritasSoftware/ts.validator Also, an Angular 6 CLI app to demo the framework: https://github.com/VeritasSoftware/ts-validator-app-angular6 The app uses a Service oriented approach to client-side form validation, with the below advantages: -- The business rules around validation are separated from the components. -- The business rules are centralized in the validation service. -- The service is re-usable. -- The service can be injected into any component. -- You can unit test the business rules by unit testing the service. NPM Package: https://www.npmjs.com/package/ts.validator.fluent Here is an example of how your TypeScript models can be validated using the framework: /* Install npm package ts.validator.fluent and then import like below */ import { IValidator, Validator, ValidationResult } from 'ts.validator.fluent/dist'; /*TypeScript model*/ class Person { Name: string; } /* Validation rules */ var validatePersonRules = (validator: IValidator) : ValidationResult => { return validator .NotEmpty(m => m.Name, "Name cannot be empty") .ToResult(); }; /* Populate model */ var person = new Person(); person.Name = "Shane"; /* Validate model */ /* Sync */ var validationResult = new Validator(person).Validate(validatePersonRules); /* Async */ var validationResult = await new Validator(person).ValidateAsync(validatePersonRules);

John Hammond

You can try out a framework/library called ts.validator.fluent. Generic object validation. Fluent rules. https://github.com/VeritasSoftware/ts.validator Also, an Angular 6 CLI app to demo the framework: https://github.com/VeritasSoftware/ts-validator-app-angular6 The app uses a Service oriented approach to client-side form validation, with the below advantages: -- The business rules around validation are separated from the components. -- The business rules are centralized in the validation service. -- The service is re-usable. -- The service can be injected into any component. -- You can unit test the business rules by unit testing the service. NPM Package: https://www.npmjs.com/package/ts.validator.fluent Here is an example of how your TypeScript models can be validated using the framework: /* Install npm package ts.validator.fluent and then import like below */ import { IValidator, Validator, ValidationResult } from 'ts.validator.fluent/dist'; /*TypeScript model*/ class Person { Name: string; } /* Validation rules */ var validatePersonRules = (validator: IValidator) : ValidationResult => { return validator .NotEmpty(m => m.Name, "Name cannot be empty") .ToResult(); }; /* Populate model */ var person = new Person(); person.Name = "Shane"; /* Validate model */ /* Sync */ var validationResult = new Validator(person).Validate(validatePersonRules); /* Async */ var validationResult = await new Validator(person).ValidateAsync(validatePersonRules);

Anuj Sharma

Bạn có thể vui lòng cập nhật cái này cho Angular 8 không? . FormErrorsComponent_1. errorMessages[type] không phải là chức năng

Anuj Sharma

Can you please explain how to handle field errors from the server, if I have the error response like. email: [ 'Email already in use' ]

Richard

Cảm ơn vì bài viết này, đó là bài viết hay nhất tôi từng thấy về chủ đề này. Có lẽ bạn nên đặt nó trong một yêu cầu kéo tới tài liệu Angular. )