angular-vietnam / 100-days-of-angular Goto Github PK

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

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.

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

Ở 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)
  ],
});

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

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

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