我在我的Angular 应用程序中使用*ngForall生成多个表单.当我只更改一个输入域时,提交按钮将被禁用/启用. 我希望相应输入字段的按钮在only相应表单的输入字段更改时禁用/启用,而不是在any任何表单的输入字段更改时禁用/启用. 我现在想不出解决办法,也想不出替代方案.有什么主意吗?

我的html代码:

<mat-card *ngIf="myText">
  <h1 mat-header class="center">My texts</h1>
  <mat-card-content>
    <div *ngFor="let item of myText">
      <h3 mat-subheader class="center">myText {{ item.index + 1 }}</h3>
      <p class="message">{{ item.textmessage }}</p>
      <form [formGroup]="myTextForm" class="myText-form" (ngSubmit)="sendPrompt(item.index)">
        <mat-form-field class="full-width" *ngIf="!error">
          <mat-label>Respond to text</mat-label>
          <textarea
            matInput
            cdkTextareaAutosize
            cdkAutosizeMinRows="3"
            cdkAutosizeMaxRows="20"
            formControlName="prompt"
            required="true"
          ></textarea>
        </mat-form-field>
        <p>
          <button mat-raised-button class="btn" color="primary" [disabled]="myTextForm.invalid" type="submit">
            Respond
          </button>
          <button
            mat-raised-button
            color="accent"
            [cdkCopyToClipboard]="item.textmessage"
          >
            Copy to clipboard
          </button>
        </p>        
      </form>
      <mat-divider *ngIf="item.index + 1 < myText.length"></mat-divider>
    </div>
  </mat-card-content>
</mat-card>

任何帮助或提示都是非常感谢的.

编辑:丹尼尔·瓦涅斯的回答为我做了这件事.谢谢!

推荐答案

如果能收到与该HTML相对应的Component.ts,那就太好了.

根据我从你那里得到的信息,如果我理解正确的话.我认为这里的问题在于您对循环中的每个表单(MyTextForm)使用相同的FormGroup. for each 表单创建单独的FormGroup.这将隔离每个表单和每个提交按钮的验证.

首先创建aray和init表单

myTextForms: FormArray = new FormArray([]);

// init form mostly on ngOnInit or when your data are ready
initForms() {
  for (const item of this.myText) {
    this.myTextForms.push(new FormGroup({
      'prompt': new FormControl('', Validators.required)
    }));
  }
}

之后,修改FormGroup和submitButton,使其使用Form数组并访问每个FormGroup by索引.

<form [formGroup]="myTextForms.at(i)" class="myText-form" (ngSubmit)="sendPrompt(item.index)">

 <button mat-raised-button class="btn" color="primary" [disabled]="myTextForms.at(i).invalid" type="submit">
        Respond
      </button>

Html相关问答推荐

值更新时旋转数字动画

Vue.js复选框对齐问题:在表格单元格中居中复选框

使用网格时图像溢出容器高度

如何防止可见的滑动抽屉,同时转移HTML方向?

轨道上的居中范围滑块拇指(Webkit)

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

在弹性框布局中的第n个元素后强制换行

从网页中提取URL

文本css后面未显示背景 colored颜色

静态DIV的标签,显示从窗体输入的值

div 中的垂直中心表格

如何防止弹性项目溢出容器?

jquery向单词中的一组字母添加跨度

使用 popover api 和 `

SVG 填充 colored颜色 不使用轮廓填充空白区域

将现有内容拆分为三列或部分

CSS:第一个类型的伪类没有按预期工作

如何将图像移动到父容器的右侧?

Tailwind CSS 复选框样式不起作用

隐藏在标题后面的下拉菜单