自定义验证 Angular 6 - 至少填充了一个文本区域

Question

当我单击提交时，没有任何文本区域完成，我必须看到一个错误。当至少填充一个时 - 我想呈现提交操作？我怎样才能以最好的方式做到这一点？

https://stackblitz.com/edit/angular-nfbram?file=src/app/app.component.htmlhttps://stackblitz.com/edit/angular-vz8g7d

Answer 1

模板驱动方法：

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
<div class="form-group">
<div class="row">
<div class="col-md-4" *ngFor="let t of textarea; let in=index">
<textarea  class="form-control"
rows="5" [(ngModel)]="textarea[in].value" 
[name]="'something' + in" 
placeholder="Type..."></textarea>
</div>
<button (click)="add()">Add input</button>
<button  type="submit" >Submit</button>
</div>
</div>
</form>

组件：循环访问对象以了解它是否为空。 在表单上收听valueChanges事件 组并基于它采取行动。

export class AppComponent {
@ViewChild('form') myForm: NgForm;
textarea: { value: string }[];
isError: boolean = false;
constructor() {
this.textarea = [{ value: '' }, { value: '' }, { value: '' }];
}
add() {
this.textarea.push({ value: '' });
}
isEmpty(obj): boolean {
for (let key of Object.keys(obj)) {
if (obj.hasOwnProperty(key) && obj[key].length) {
return false;
}
}
return true;
}
ngAfterViewInit() {
this.myForm.valueChanges.subscribe(value => {
this.isError = false;
})
}
onSubmit(form) {
if (this.isEmpty(form)) {
this.isError = true;
} else {
this.isError = false;
}
}
}

Forked StackBlitz

Answer 2

按照您的模式，您可以使用Array.every：

allEmpty() {
return this.textarea.every(t => t.value === '')
}
<button [disabled]="allEmpty()">Submit</button>

编辑：

<button (click)="onSubmit($event)">Submit</button>
<span *ngIf="allEmpty() && clicked">
error
</span>
clicked = false;
allEmpty() {
return this.textarea.every(t => t.value === '')
}
onSubmit(e) {
this.clicked = true;
if (this.allEmpty()) {
e.preventDefault();
}
}

Answer 3

这里不是使用普通的旧Javascript，而是Angular方式：表单组级别的自定义验证函数。

堆栈闪电战

function atLeastOneTextarea(): ValidatorFn {
return (group: FormGroup): ValidationErrors => {
const hasAtLeastOneValue = Object.keys(group.value).some(key => !!group.value[key]);
return !hasAtLeastOneValue && { 'atLeastOne': true } || null;
};
}

验证器将测试表单的值是否至少具有一个真实值。如果没有，它将显示错误。

我切换到反应式表单，因为为了验证，当您是初学者时，它更好地理解它是如何工作的。您可以随意将其更改为您对模板驱动表单的需求，或按原样进行更改。