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

Posted 2023-05-07

【中文标题】Angular Material matDatepicker 和 Textarea 作为表单的一部分

【英文标题】：Angular Material matDatepicker and Textarea as parts of a form

【发布时间】：2019-01-07 02:02:40

【问题描述】：

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

开始日期 结束日期 一些文本进入文本区域

我使用角材料“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>

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

【问题讨论】：

提交按钮保持disabled 可能是因为一旦表单有效，您就永远不会将isDisabled 的值更改为false。你可以改为[disabled]="f.invalid"

【参考方案1】：

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

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

[disabled]="f.invalid"

html代码

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

【讨论】：

对...感谢您的提示！ （这是一个愚蠢的错误）