web-dev-qa-db-ja.com

角度、[無効]を使用して送信ボタンを無効にし、フォームの有効性をチェックします

[disable]=form.controls[...].invalid条件チェックを使用して送信ボタンを無効にしようとしています。入力フィールドが空またはinvalidの場合、送信ボタンを無効にする必要があります。しかし、私はそれを間違っているように見えます。最初の入力フィールドを除いて、一部のフィールドに入力して一部のフィールドを空のままにすると、ボタンが無効になります。最初の入力フィールドに入力すると、ボタンが有効になります（他の入力フィールドはまだ空またはinvalidです）。

//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
  dateFormat: 'dd-mmm-yyyy',
};

setDate(): void {
  let date = new Date();
  this.form01.patchValue({
    DoB: {
      date: {
        year: date.getFullYear(),
        month: date.getMonth() + 1,
        day: date.getDate()
      }
    }
  });
}

clearDate(): void {
  this.form01.patchValue({
    DoB: null
  });
}

constructor(public builder: FormBuilder) {
  this.form01 = this.builder.group({
    email: [null, Validators.required], //text
    DoB: [null, Validators.required], //radio button
    gender: [null, Validators.required], //date picker
  });
}

results: object = new Object();
functionForm01() {
  this.results = [{
    {
      "email": this.form01.controls.email.value
    },
    {
      "DoB": this.form01.controls.DoB.value
    },
    {
      "gender": this.form01.controls.gender.value
    }
  }]
  console.log(this.result);

  this.form01.reset();
}
<!--component.html-->
<div>
  <form [formGroup]="form01">
    email:<input type="text" name="email" formControlName="email" required/> gender:
    <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
    <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
    <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="form01.controls['email' || 'DoB' || 'gender'].invalid" (click)="functionForm01()">Click</button>
  </form>
</div>

Angular TypeScriptおよびmyDatePickerパッケージ このリンク を使用しています。誰かが私を助けてくれますか？

htmlangulartypescriptform-control
6
Wira Xie

フォームの有効性をチェックすることにより、ボタンを有効/無効にすることができます。

<button type="submit" [disabled]="!disableBtn">Click</button>

コンポーネントの内部：

let disableBtn = false;
this. form01.valueChanges 
            .subscribe((changedObj: any) => {
                 this.disableBtn = this. form01.valid;
            });

またはHTML経由：

<button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>
10
moohkooh

FormGroupオブジェクトがあるので、form01が無効な場合はボタンを無効にできます

<!--component.html-->
    <div>
      <form [formGroup]="form01">
        email:<input type="text" name="email" formControlName="email" required/> gender:
        <input type="radio" name="gender" formControlName="gender" value="male"> male<br>
        <input type="radio" name="gender" formControlName="gender" value="female"> female<br> DoB:
        <my-date-picker name="DoB" [options]="myDatePickerOptions" formControlName="DoB" required></my-date-picker>

    <button type="submit" [disabled]="!form01.valid" (click)="functionForm01()">Click</button>

      </form>
    </div>
10
Abdul-Razak Adam

Imports import {FormsModule、ReactiveFormsModule} from '@ angular/forms'の下のapp.module.ts内にFormsModuleをインポートする必要があります。

@NgModule({
imports: [
     FormsModule      
])}
0
Nilesh Sutar