Angular2反应形式，FormControl默认值处于原始状态

Question

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

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

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

<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] 只返回一个字符串数组，而不是 FormControls 的数组。

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

Answer 1

您可以使用检查控制状态

如果触摸是真的，那么它是脏的

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