我对Angular 2表单做错了什么

时间:2018-01-18 09:45:35

标签: angular typescript angular-forms

我正在尝试用角度2

创建简单的反应形式

这是我的app.module.ts

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;    
import java.util.ArrayList;



public class RecycleAdapter extends RecyclerView.Adapter<RecycleAdapter.HerosViewHolder> {
    ArrayList<Heros> herosList;
    public RecycleAdapter(ArrayList<Heros> heross){
        herosList=heross;
    }

    @Override
    public HerosViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.eachrow,parent,false);
        return new HerosViewHolder(view);
    }

    @Override
    public void onBindViewHolder(HerosViewHolder holder, int position) {
        Heros heros=herosList.get(position);
        holder.txtName.setText(heros.name);

    }

    @Override
    public int getItemCount() {
        return herosList.size();
    }

    public class HerosViewHolder extends RecyclerView.ViewHolder{
        public ImageView herosImg;
        public TextView txtName;
        public HerosViewHolder(View itemView) {
            super(itemView);
            herosImg=(ImageView) itemView.findViewById(R.id.imgg);
            txtName=(TextView)itemView.findViewById(R.id.txtHerosName);


        }
    }
}



public class PageFragment extends Fragment {
    public static final String ARG_PAGE = "ARG_PAGE";

    private int mPage;
    RecyclerView recyclerView;
    LinearLayoutManager manager;
    String[] names={"abs","vline","chest"};

    ArrayList<Heros> passName;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARG_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARG_PAGE);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        passName=new ArrayList<>();


        View view = inflater.inflate(R.layout.fragment_page, container,
                false);
        recyclerView=(RecyclerView)view.findViewById(R.id.rec);
        manager=new LinearLayoutManager(G.context);
        recyclerView.setLayoutManager(manager);
        recyclerView.setHasFixedSize(true);
        for (int i=0;i<3;i++){
            Heros heros=new Heros();
            heros.name=names[i];
            passName.add(heros);
        }
        recyclerView.setAdapter(new RecycleAdapter(passName));


        return view;
    }
}

这是我的app.component.ts

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule 
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

当我填写输入并单击“提交”时,loginForm值仍然具有初始值。此外,当我填写输入时,它不会改变。 示例是超简单的,但它不起作用。我做错了什么?

以下是plunker https://plnkr.co/edit/aMuYuRXMlTsox4TklHIg?p=preview

的链接

1 个答案:

答案 0 :(得分:2)

您拼错了formControllName - 额外l