Rob Mousley's questions

Tenho um problema simples, porém complexo. Tenho um formulário reativo e quero definir a validação programaticamente.

    this.boatForm.get('boatType').setValidators(Validators.required);
    this.boatForm.updateValueAndValidity();

    this.boatForm.get('boatType').updateValueAndValidity();
    this.#logger.debug(
        '/n', 'value:', this.boatForm.get('boatType').value,
        '/n', 'valid:', this.boatForm.get('boatType').valid
    )

O valor do controle boatType é nulo. Portanto, espero que o log mostre:

valor: válido: falso

E... acontece mesmo.

Mas eu tenho vários controles naquele formulário, então, em vez de aplicar updateValueAndValidity() a cada controle individualmente, quero executar:

    this.boatForm.get('boatType').setValidators(Validators.required);
    // Set other validators on other controls on the same form
    this.boatForm.updateValueAndValidity();

    this.#logger.debug(
        '\n', 'value', this.boatForm.get('boatType').value,
        '\n', 'valid', this.boatForm.get('boatType').valid
    )

Mas agora eu entendo:

valor: válido: verdadeiro

A solução alternativa que implementamos é chamar um método:

static updateFormControlValidators(form: FormGroup): void {
    // Iterate over each control in the form group

    Object.keys(form.controls).forEach(controlName => {
        const control = form.get(controlName);

        // Call updateValueAndValidity to re-evaluate the validity of each control
        if (control) {
            control.updateValueAndValidity();
        }
    });
}

Mas a questão é:

form.updateValueAndValidity() deve realizar a mesma coisa?

Quero usar um método simples para verificar a conectividade da internet. Temos um arquivo hospedado em um servidor e eu simplesmente quero verificar se podemos vê-lo.

O arquivo contém:

{
    "status": "success"
}

No meu componente Angular:

#http = inject(HttpClient);
isOnline: boolean;

updateOnlineStatus(url: string): void {
    console.log(this.#CLASS_NAME + '.updateOnlineStatus() - url', url);
    
    this.#http.get<any>(url).pipe(
        catchError((error) => {
            console.log(this.#CLASS_NAME + '.updateOnlineStatus(), error', error);
            this.isOnline = false;
            return of(null);
        })
    ).subscribe(response => {
        if (response && response.status === 'success') {
            this.isOnline = true;
        } else {
            this.isOnline = false;
        }
    });
}

Mas quando chamo o método, recebo:

LoginPage.updateOnlineStatus() - url https://xxx/status.json
login.component.ts:288 LoginPage.updateOnlineStatus(), error TypeError: Cannot read 
properties of undefined (reading 'length')
at HttpHeaders.applyUpdate (http.mjs:222:27)
at http.mjs:195:58
at Array.forEach (<anonymous>)
at HttpHeaders.init (http.mjs:195:33)
at HttpHeaders.forEach (http.mjs:263:14)
at Observable._subscribe (http.mjs:2116:29)
at Observable._trySubscribe (Observable.js:37:25)
at Observable.js:31:30
at errorContext (errorContext.js:19:9)
at Observable.subscribe (Observable.js:22:21)

E na aba de rede, posso ver que o GET não é executado, então parece que o HttpClient está falhando antes disso.

O que estou fazendo errado?

O arquivo existe e posso vê-lo usando o Postman ou até mesmo o navegador (mas a solicitação nem está sendo executada).