73

FormBuilder for Angular を使用してチェックボックスがチェックされるまで、ボタンを無効にしたい。チェックボックスの値を明示的にチェックしたくないので、単純にチェックできるようにバリデーターを使用したいと思いますform.valid。

チェックボックスの下の両方の検証ケースで

interface ValidationResult {
  [key:string]:boolean;
}

export class CheckboxValidator {
  static checked(control:Control) {
    return { "checked": control.value };
  }
}

@Component({
  selector: 'my-form',
  directives: [FORM_DIRECTIVES],
  template: `  <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
    <input type="checkbox" id="cb" ngControl="cb">
    <button type="submit" [disabled]="!form.valid">
    </form>`
})

export class SomeForm {
  regForm: ControlGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      cb: [ CheckboxValidator.checked ]
      //cb: [ false, Validators.required ] <-- I have also tried this
    });
  }

  onSubmit(value: any) {
    console.log('Submitted: ', this.form);
  }
}
4

13 に答える 13

10

Validator.required がチェックボックスに対して適切に機能しないことがわかりました。チェックボックスをオンにしてからオフにすると、チェックがオフになっていても、FormControl はそれを有効として表示します。真か偽かを問わず、何かに設定したことのみをチェックすると思います。

FormControl に追加できる簡単なバリデータを次に示します。

  mustBeChecked(control: FormControl): {[key: string]: string} {
    if (!control.value) {
      return {mustBeCheckedError: 'Must be checked'};
    } else {
      return null;
    }
  }
于 2016-08-13T17:51:57.070 に答える
0

私はこの本当に簡単な例を持っています:

あなたのコンポーネントで：

login : FormGroup;

constructor(@Inject(FormBuilder)formBuilder : FormBuilder) {
this.login = formBuilder.group({userName: [null], password: [null],
staySignedIn: [false,Validators.pattern('true')]});
}

あなたのHTMLで：

<form [formGroup]="login" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input formControlName="userName" required>
    </div>
    <div class="form-group">
        <input formControlName="password" type="password" required>
    </div>
    <div>
        <label>
    <input formControlName="staySignedIn" checked="staySignedIn" type="checkbox"> bla
  </label>
    </div>
    <button type="submit">bla</button>
    <div >
        <a href>bla?</a>
    </div>
</form>
于 2017-03-28T15:34:25.537 に答える
-1

PrimeNG を使用している場合は、次のように TAG app-form-required-field を介して実行できます。

<p-checkbox name="_yes" #active="ngModel" required value="true" 
label="Active" binary="true" [(ngModel)]="filter._yes"></p-checkbox>

<p-checkbox name="_no" #inactive="ngModel" required label="Inactive" 
binary="true" [(ngModel)]="filter._no"></p-checkbox>

<app-form-required-field
     *ngIf="!filter._yes && !filter._no"
     [form]="active"
     [form]="inactive"
     id="msgAtivo"
     requiredMessage="Field required!"
>
</app-form-required-field>
于 2020-03-16T14:04:51.260 に答える
-2

変更を検出する方法を作成する

checkValue(event: any) {
    this.formulario.patchValue({
      checkboxControlName: event.target.checked
    })
}

そのメソッドをイベントの変更とngModel requiredプロパティに配置します

<input (change)="checkValue($event)" type="checkbox" formControlName="checkboxControlName" value="true" ngModel required>

そして、従来の方法を使用して検証します

this.formulario = new FormGroup({
  checkboxControlName: new FormControl('', [Validators.required])
});

ソース

于 2019-09-30T20:01:29.393 に答える