Question

我创建了一个表单，允许用户通过单击按钮添加其他文本输入。这些输入后面的FormControl存储在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

您可以使用

检查控制状态

如果被触及为真，那么它是脏的

class_id

对于原始你可以像

一样检查

sli = slice(None)
arr[0,sli]
# array([0,1,2,3,4,5,6,7,8,9])

<强>更新

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

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

您现在可以在此变量上使用this.form.get('controlname').pristine和let val = this.user.get('<FormArray>') as FormArray; console.log(val.at(index));

Angular2 Reactive表单，FormControl默认值为pristine状态

1 个答案: