Angular Material matDatepicker 和 Textarea 作为表单的一部分

Question

在我的 Angular 应用程序中，我有一个表单。在此表格中，用户应输入以下内容：

开始日期
结束日期
文本区域中的一些文本

我使用 angular material "Datepicker" 作为开始日期和结束日期输入：

    <form #f="ngForm" (ngSubmit)="onSubmit(f)" fxLayout="column" fxLayoutAlign="center"> 
      <mat-form-field>
        <input matInput [matDatepicker]="picker1" placeholder="Select Start Date" ngModel #beginningInput="ngModel" name="beginning" type="date" required>
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
        <mat-error *ngIf="beginningInput.hasError('required')">
            Start date is required.
        </mat-error>   
      </mat-form-field>
      <mat-form-field>
        <input matInput [matDatepicker]="picker2" placeholder="Select End Date" ngModel #endInput="ngModel" name="end" type="date" required>
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
        <mat-error *ngIf="endInput.hasError('required')">
            End date is required.
        </mat-error>   
      </mat-form-field>
      <mat-form-field>
         <textarea matInput placeholder="Textarea" ngModel #textInput="ngModel" name="description" ></textarea>
      </mat-form-field>
      <div class="gap"></div>
      <div class="buttons">
        <button class="cancelButton" mat-raised-button color="primary" [mat-dialog-close]>Cancel</button>
        <button class="submitButton" mat-raised-button color="primary" [disabled]="isDisabled">Submit</button>    
      </div>  
    </form>

提交表单时，应该保存开始日期、结束日期和文本区域的内容，然后进行处理。所以在 .ts 文件中，有以下代码（为了完整起见，我将其包括在内）：

onSubmit(form: NgForm) {

     this.beginning = form.value.beginning;
     this.end = form.value.end;
     this.description': form.value.description;

     //more code

}

但是表单一直无效，也就是无法提交，如下截图：

考虑到我想做的事情，我不确定以下几行是否正确：

<input matInput [matDatepicker]="picker1" placeholder="Select Start Date" ngModel #beginningInput="ngModel" name="beginning" type="date" required>

和

<input matInput [matDatepicker]="picker2" placeholder="Select End Date" ngModel #endInput="ngModel" name="end" type="date" required>

和

<textarea matInput placeholder="Textarea" ngModel #textInput="ngModel" name="description" ></textarea>

我的代码有问题吗？任何帮助将不胜感激。

Answer 1

Submit 按钮保持 disabled 可能是因为一旦表单有效，您永远不会将 isDisabled 的值更改为 false。

您也可以直接检查表单有效性

[disabled]="f.invalid"

html代码

<button class="submitButton" mat-raised-button color="primary" [disabled]="f.invalid">Submit</button>

Angular Material matDatepicker 和 Textarea 作为表单的一部分

Angular Material matDatepicker and Textarea as parts of a form

forms

textarea

datepicker

angular-material

angular