Question

现在我希望验证在用户单击输入字段时起作用，因为它已经显示了“请填写”条件

> import { Component, OnInit, Input } from '@angular/core'; import {
> Router } from '@angular/router'; import { FormBuilder, FormGroup,
> FormArray } from '@angular/forms'; import { Validators } from
> '@angular/forms';
> 
> 
> 
> @Component({   selector: 'todo-app',   templateUrl:
> './todo-app.component.html',   styleUrls: ['./todo-app.component.css']
> }) export class TodoAppComponent implements OnInit {
> 
>    myForm: FormGroup; todoitems = []; todolist; submitted = false;
> 
> 
>   constructor(private router:Router, private formBuilder: FormBuilder
> ) {    }
>   
> 
>   ngOnInit() {
>     this.myForm = this.formBuilder.group({
>       'todoitems': [this.todolist,Validators.compose([Validators.required,Validators.minLength(3)])]
>       
>     })
> 
>     this.todoitems = JSON.parse(localStorage.getItem('todoitems'));   }
> 
>   get todoForms() {
>     return this.myForm.get('todoitems') as FormArray   }
> 
>   addTodo(todolist) {
>     
>     if(this.myForm.invalid){
>       return;
>     }
>     if (this.todoitems) {
>       this.todoitems.push(todolist);
>       if (this.myForm.valid) {
>         console.log("Form Submitted!");
>         this.myForm.reset();
>       }
>       localStorage.setItem('todoitems', JSON.stringify(this.todoitems));
>     }   }
>   
> 
>   deletetodo(index){
>       this.todoitems.splice(index, 1); 
>       localStorage.setItem('todoitems', JSON.stringify(this.todoitems));
>        
>       
>   
> 
>   
>       } get f() { return this.myForm.controls; }
> 
> }

<

form [formGroup]="myForm" >
        
        <div class="input">
                
            <input formControlName="todoitems"  [(ngModel)]="todolist" name="todoitems"  >
            <div *ngIf="myForm.controls.todoitems.errors">
                    <div *ngIf="myForm.controls.todoitems.errors.required"> please fill</div>
                    <div *ngIf="myForm.controls.todoitems.errors.minlength">min 3</div>
                    <div *ngIf="submitted && f.todoitems.errors.apply(this.submitted)">
                        <div *ngIf="f.todoitems.errors.required">First Name is required</div>
                  
            </div>
            </div>
       

               <button  type="submit" (click)="addTodo(todolist)">Add</button >
            <table style="width:50%">
            <tr *ngFor="let todoitem of todoitems; let i = index">
             <td>{{ todoitem }}</td>

             <td>
                    <button (click)="deletetodo(i)">Delete</button>
             </td>
            </tr>
            
           
        
                
         </table>
        </div>
       


      
            
    </form>

Answer 1

您可以通过以下方式尝试：

https://www.npmjs.com/package/ngx-webstorage-service

import { SESSION_STORAGE, StorageService } from 'ngx-webstorage-service';

在ts文件中，导入存储对象的位置：

Answer 2

您正在将数据存储在localStorage中，但是您永远不会检索该存储的数据。因此，您可以使用localStorage.getItem('key')来获取数据。

（此解决方案没有任何第三方库）

this.todoitems = JSON.parse(localStorage.getItem('todoitems'));

TS ngOnInit()代码：

ngOnInit() {
  this.myForm = this.formBuilder.group({
    'todoitem': this.todolist
  })

  this.todoitems = JSON.parse(localStorage.getItem('todoitems')); -- this line
}

Working-Demo

无法从本地存储中检索数据（Angular 8）

2 个答案: