web-dev-qa-db-ja.com

Angular [ngmodel]を使用したマテリアル2の日付ピッカー

リアクティブフォームグループの一部として、dateプロパティをmat-datepickerの入力にバインドしようとしています。フォームが有効でない限り、送信ボタンが無効に設定されているため、すべてのメソッドが機能しませんでした。

_<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
_

Component.ts：

_start: Date.now()
startDate: "1/1/2018"
this.ShiftForm = new FormGroup({
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
});
_

動作しなかったメソッド：

  1. [(ngModel)]="startDate"を入力フィールドに追加
  2. 入力フィールドに_[ngModel]="startDate"_を追加する
  3. FormControlに値をプリロードする：startingDate: new FormControl(this.startDate),

部分的にではあるが満足に機能しないメソッド：

  1. _[value]="startDate"_を入力フィールドに追加：日付は表示されましたが、リアクティブフォームで読み取られませんでした。つまり、フォームが無効なため、送信ボタンが無効のままになります。有効にするには、日付を手動で設定する必要があります（日付入力または日付ピッカーを使用）
  2. 入力フィールドから_[ngModel]="startDate"_を削除しながら_[matDatepicker]="datepicker1"_を追加する：date dateが表示されましたが、datepickerへのアクセスが削除されました。

私が必要とするのは、[ngModel]だけであるため、Reactive Formがそれを読み取る必要があります。

大いに感謝ヘルプ！

[〜＃〜] edit [〜＃〜]これは私のformGroupです：

_this.ShiftForm = new FormGroup({
  startingDate: new FormControl(this.startDate),
  startTime: new FormControl(),
  endingDate: new FormControl(this.endDate),
  endTime: new FormControl(),
});
_

これはHTMLです。

_<form [formGroup]="ShiftForm" fxLayout="column" fxLayoutAlign="center stretch">
<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControlName]="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
..
..
..
</form>
_

これは私が今得たエラーです：

エラー：名前属性が指定されていないコントロールが見つかりません

javascriptangularformsdatepickermaterial-design
9
shukar

Angularには、フォームを使用する2つの方法があります： template-driven または reactive 。これら2つを混ぜて使用しますが、どちらを使用するかを選択する必要があります。ドキュメントは、この選択であなたを導くことができます。

テンプレート駆動を選択する場合、[(ngModel)]を使用できます（メソッド1と同様）。

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [(ngModel)]="startDate" required>

startDate = new Date();

リアクティブを選択すると、コントローラーのFormControlで[formControl]を使用できます（方法3と同様）。

<input matInput [matDatepicker]="datepicker1" placeholder="Start Date" [formControl]="startDate">

startDate = new FormControl(new Date(), Validators.Required);
// Use `startDate.value` to get the value of the control

何をしているかわからない場合は、[value]を使用しないでください。予期しない結果が得られる可能性があります。

13
Manduro

解決済み、@ Manduro、これについて説明してくれてありがとう

this.startDateは文字列でしたが、Datepickerは日付のみを翻訳します。

最終的に、これは私がそれを機能させるために追加したものです。

startingDate: new FormControl(moment(this.startDate).format())

HTML：

<mat-form-field fxFlex>
  <input matInput [matDatepicker]="datepicker1" placeholder="Start Date" formControlName="startingDate" required>
  <mat-datepicker-toggle matSuffix [for]="datepicker1"></mat-datepicker-toggle>
  <mat-datepicker touchUi="true" #datepicker1></mat-datepicker>
</mat-form-field>
0
shukar