angular-vietnam/100-days-of-angular

Series độc quyền cung cấp bởi thành viên của Angular Vietnam về các chủ đề liên quan tới Angular trong vòng 100 ngày.

100-days-of-angular's Issues

Day 37: Async Validator trong Angular Form - về cách tạo custom validators

Ở phần source code ví dụ đang sử dụng

validateUserNameFromAPI(
  control: AbstractControl
): Observable<ValidationErrors | null> {
  return this._api.validateUsername(control.value).pipe(
    map(isValid => {
      if (isValid) {
        return null;
      }
      return {
        "usernameDuplicated": true
      }
    })
  );
}

để tạo custom async validator. Tuy nhiên, do trong function này đang sử dụng this pointer nên ở phần sử dụng cần phải viết như bên dưới

this.validateUserNameFromAPI.bind(this)

Để dễ hiểu hơn thì chúng ta có thể thay đổi validateUserNameFromAPI lại như sau

export function validateUserNameFromAPI(
  api: ApiService
): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return api.validateUsername(control.value).pipe(
      map(isValid => {
        if (isValid) {
          return null;
        }
        return {
          "usernameDuplicated": true
        };
      });
    );
  }
}

Lúc này ở chỗ sử dụng sẽ trở thành

this.registerForm = this._fb.group({
  username: [
    "",
    Validators.compose([
      Validators.required,
      Validators.minLength(6),
      Validators.pattern(/^[a-z]{6,32}$/i),
    ]),
    validateUserNameFromAPIDebounce(this._api)
  ],
});

Day 37 - Async Validator

Day007 - Khi nào nên dùng ngOnChanges hay setter/getter

Em thấy nên ghi rõ thêm ưu nhược điểm của ngOnChanges và setter/getter.
Trong bài viết anh chỉ ghi 1 câu chung chung thế này:
Trong trường hợp bạn không thích dùng ngOnChanges, chúng ta có thể sử dụng getter/setter để làm điều này.

https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day007-Component-Interaction-01.md

Angular 100

Thank you

Cảm ơn các anh vì những chia sẻ rất hữu ích <3

Day 44. ngrx effect

Angular

100 ngày với angular

Day 38 - Template Form Custom Validator

Angular

Angular

Spanish Traslation

Hello, I have been using this tutorial and it seems great, however I would like to collaborate with the translation into Spanish.

Tuyệt vời cảm ơn các anh

Angular

Day 43. ngrx action, reducer, selector

Validate FormGroup với 1 vài control

Mình gặp 1 trouble như sau nhưng hiện tại chưa có hướng giải quyết:
Có 1 FormGroup gồm 3 FormControl: A, B, C.Mình viết hàm asyncValidators luôn cả FormGroup nhưng mình chỉ muốn validate khi chỉ có A,B thay đổi thôi.Còn C thì không.
Có cách nào mà không cần bỏ C ra hoặc tạo FormGroup riêng cho A với B không? Tại khi get Value ra đem lên BE hơi rắc rối.

Thanks.

Chưa thấy lifecycle anh nhỉ?

100days angular

Translation?

I know I can't provide this but it would so cool for a translation to English. :)

Day 38 - Gặp lỗi khi lazy load component có dùng *ngIf hoặc cần import từ module khác

Trong phần này mình không tìm thấy cách hướng dẫn khi lazy load 1 component phức tạp.
Mình có thêm *ngIf vào thì gặp lỗi:

Can't bind to 'ngIf' since it isn't a known property of 'div'.

Demo: https://stackblitz.com/edit/angular-ivy-8qqgwg?file=src%2Fapp%2Fapp.component.ts

Day 42. Giới thiệu state management, what, why, how