Angular2 Reactive 表单，原始状态下的 FormControl 默认值

Question

我创建了一个表单，允许用户通过单击按钮添加额外的文本输入。这些输入后面的 FormControl 存储在 FormGroup 内部的 FormArray 中。

我想为这些输入提供一个默认值，如果它们是原始的，将提交该默认值。如果用户更改输入的值，将其更改为脏，我不希望提交或显示默认值。

我目前正在这样显示输入，因为占位符属性完全符合我的要求，显示默认名称，仅当输入未更改时。

<div
    formArrayName="names" 
    *ngFor="let server of names.controls; let i = index; trackBy:trackByFn">
        <span>{{ i + 1 }}</span>
        <input 
        type="text" 
        formControlName="{{i}}"
        placeholder="{{defaultName}}">

</div>

为了验证名称，我创建了以下验证函数：

export function validateServerName(form: FormGroup): ValidationErrors | null {
    const names: string[] = form.value[CREATE_FORM_KEY_NAMES];

    for (const name of names) {
        if (name.trim() === '') {
            return {
                invalidName: true
            };
        }
    }

    return null;
}

这里我无法确定元素是脏的还是原始的，因为 form.value[key] 只有 returns 字符串数组，而不是 FormControls 的数组。

我正在寻找一种更简单的方法来完成我想要实现的目标，或者寻找一种正确验证表单的方法。

Answer 1

您可以使用

检查控制状态

如果 touched 是真的那么它就是脏的

this.form.get('controlname').touched

对于原始的，您可以像

这样检查

this.form.get('controlname').pristine

更新

对于表单数组，它将类似于

  let val = this.user.get('<FormArray>') as FormArray;
  console.log(val.at(index));

您现在可以在此变量上使用 pristine 和 touched

Angular2 Reactive 表单，原始状态下的 FormControl 默认值

Angular2 Reactive forms, FormControl default value in pristine status

html

typescript

angular

angular-reactive-forms