角度4リアクティブ形式で無効なコントロールを見つける方法

私は以下のようなAngularのリアクティブフォームを持っています：

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm.validはfalseを返しますが、すべてが正常に見えます。

コントロールコレクションのstatusプロパティを確認して見つけようとしました。しかし、無効なものを見つけてユーザーに表示する方法があるのだろうか？

すべてのコントロールを繰り返し処理して、ステータスを確認するだけです。

    public findInvalidControls() {
        const invalid = [];
        const controls = this.AddCustomerForm.controls;
        for (const name in controls) {
            if (controls[name].invalid) {
                invalid.push(name);
            }
        }
        return invalid;
    }

私はこの問題と戦いました。すべてのフォームフィールドは有効ですが、それでもフォーム自体は無効です。

コントロールが動的に追加/削除されるFormArrayに「Validator.required」を設定したことがわかりました。したがって、FormArrayが空の場合でも、それは必須であり、したがって、表示されているすべてのコントロールが正しく入力されていても、フォームは常に無効でした。

'findInvalidControls'関数はFormControlのみをチェックし、FormGroup / FormArrayはチェックしなかったため、フォームの無効な部分は見つかりませんでした。だから私はそれを少し更新しました：

/* 
   Returns an array of invalid control/group names, or a zero-length array if 
   no invalid controls/groups where found 
*/
public findInvalidControlsRecursive(formToInvestigate:FormGroup|FormArray):string[] {
    var invalidControls:string[] = [];
    let recursiveFunc = (form:FormGroup|FormArray) => {
      Object.keys(form.controls).forEach(field => { 
        const control = form.get(field);
        if (control.invalid) invalidControls.push(field);
        if (control instanceof FormGroup) {
          recursiveFunc(control);
        } else if (control instanceof FormArray) {
          recursiveFunc(control);
        }        
      });
    }
    recursiveFunc(formToInvestigate);
    return invalidControls;
  }

無効なAngularコントロールには、「ng-invalid」という名前のCSSクラスがあります。

ChromeのDevToolsで、[コンソール]タブを選択します。

コンソールプロンプトでコマンドを入力します。

document.getElementsByClassName('ng-invalid')

出力は次のようになります。

この場合、下線付きのテキストはフォームコントロール用listen-addressです。そして、丸で囲まれたテキスト：.ng-invalidコントロールが無効であることを示します。

注：クロムでテスト済み

フォームとすべてのコントロールの両方が角度クラスAbstractControlを拡張します。各実装には、検証エラーへのアクセサーがあります。

let errors = this.AddCustomerForm.errors
// errors is an instance of ValidatorErrors

APIドキュメントにはすべての参照が含まれています https://angular.io/api/forms/AbstractControl

編集

エラーアクセサーはこのように機能すると思いましたが、このgithubへのリンクは、私と同じように考えている人が他にもいることを示してい ますhttps://github.com/angular/angular/issues/11530

いずれの場合も、コントロールアクセサーを使用することで、フォーム内のすべてのformControlを反復処理できます。

Object.keys(this.AddCustomerForm.controls)
    .forEach( control => {
        //check each control here
        // if the child is a formGroup or a formArray
        // you may cast it and check it's subcontrols too
     })

これで、Angular 9では、markAllAsTouched（）メソッドを使用して、無効なコントロールバリデーターを表示できます。

this.AddCustomerForm.markAllAsTouched();

フォームに多くのフィールドがない場合は、F12キーを押してコントロールにカーソルを合わせると、フィールドの元の値/タッチされた値/有効な値を含むポップアップが表示されます-"＃fieldname.form-control.ng- untouched.ng-無効」。

this.form.updateValueAndValidity()それぞれのコントロールで同じメソッドを使用するか、実行してみるべきだと思います。

これを試して

 findInvalidControls(f: FormGroup) {
    const invalid = [];
    const controls = f.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
  }

これにより、コントロールのすべての名前がログに記録されます😊

for (let el in this.ReactiveForm.controls) {
      if (this.ReactiveForm.controls[el].errors) {
        console.log(el)
      }
 }          

これから配列または文字列を作成し、ユーザーに表示できます

私は自由にAngularInDepth.com- sコードを改善し、ネストされた形式の無効な入力も再帰的に検索するようにしました。FormArray-sまたはFormGroup-sのどちらでネストされているか。トップレベルのformGroupを入力するだけで、無効なすべてのFormControlが返されます。

FormControlチェックと無効な配列機能への追加を別の関数に分離する場合は、「instanceof」タイプのチェックの一部をすくい取ることができます。これにより、関数の見た目がかなりきれいになりますが、すべての無効なformControlのフラット配列を取得するために、グローバルな単一の関数オプションが必要でした。これが解決策です。

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        switch( control.constructor.name )
        {
            case 'AbstractControl':
            case 'FormControl':
                if (control.invalid) _invalidControls.push( control );
                break;

            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

それを必要とする人のためだけに、彼らはそれを自分でコーディングする必要はありません。

編集＃1

無効なFormArray-sとFormGroupsも返すように要求されたため、それも必要な場合は、このコードを使用してください

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        if (control.invalid) _invalidControls.push( control );
        switch( control.constructor.name )
        {    
            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

フォームの値をログに記録できます。console.log(this.addCustomerForm.value)すべてのコントロールの値をコンソールし、nullまたは ""（空の）フィールドは無効なコントロールを示します

HTMLページで空またはnullのフォーム制御値を確認してください